Для чего используются ключи?

Ключи (Keys) в React

Это один из самых важных, но часто неправильно понимаемых концепций в React. Ключи используются для идентификации элементов в списках и помогают React правильно обновлять DOM.

Зачем нужны ключи

Когда React рендерит список элементов, ему нужно понять, какой элемент в новом списке соответствует какому элементу в старом списке. Ключи позволяют React идентифицировать каждый элемент.

// БЕЗ ключей - React не знает, какой элемент изменился
function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li>{todo.text}</li>  // Плохо - нет ключа
      ))}
    </ul>
  );
}

// С ключами - React может правильно отследить изменения
function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>  // Хорошо - уникальный ключ
      ))}
    </ul>
  );
}

Проблемы при использовании index как ключа

Очень частая ошибка - использование индекса массива как ключа. Это работает только если список статичный.

// ПЛОХО - индекс как ключ
function ItemList({ items }) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>
          <input value={item.name} />
          {item.name}
        </li>
      ))}
    </ul>
  );
}

// Проблема при удалении элемента:
const items = [
  { id: 1, name: "Alice" },  // key=0
  { id: 2, name: "Bob" },    // key=1
  { id: 3, name: "Carol" }   // key=2
];

// Удаляем "Bob"
const newItems = [
  { id: 1, name: "Alice" },  // key=0 (правильно)
  { id: 3, name: "Carol" }   // key=1 (было key=2!) - ПРОБЛЕМА
];

// React думает:
// Элемент с key=0 (Alice) остался
// Элемент с key=1 (было Bob) изменился на Carol - но input сохранил старое значение!

Правильное использование ключей

Используй уникальный стабильный идентификатор:

// ХОРОШО - ID из данных
function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>  // ID из БД - стабильный и уникальный
          <input value={user.name} />
          {user.name}
        </li>
      ))}
    </ul>
  );
}

// ХОРОШО - UUID для временных данных
import { v4 as uuidv4 } from 'uuid';

function CommentForm() {
  const [comments, setComments] = useState([]);
  
  const addComment = (text) => {
    const newComment = {
      id: uuidv4(),  // Уникальный ID, не зависит от позиции
      text,
      timestamp: new Date()
    };
    setComments([...comments, newComment]);
  };
  
  return (
    <>
      {comments.map(comment => (
        <div key={comment.id}>  // Стабильный ID
          <p>{comment.text}</p>
          <small>{comment.timestamp.toLocaleString()}</small>
        </div>
      ))}
    </>
  );
}

Последствия неправильных ключей

1. Потеря состояния компонента

function TodoItem({ id, text }) {
  const [isEditing, setIsEditing] = useState(false);
  
  return (
    <div>
      {isEditing ? (
        <input defaultValue={text} />
      ) : (
        <span>{text}</span>
      )}
      <button onClick={() => setIsEditing(!isEditing)}>
        {isEditing ? "Save" : "Edit"}
      </button>
    </div>
  );
}

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>  {/* ПЛОХО - индекс */}
          <TodoItem id={todo.id} text={todo.text} />
        </li>
      ))}
    </ul>
  );
}

// Сценарий:
// 1. Нажимаешь Edit на первом элементе
// 2. Удаляешь второй элемент из списка
// 3. state isEditing остался на key=0, но теперь там другой элемент!
// 4. Видишь Edit mode на неправильном элементе

Правильно:

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>  {/* ХОРОШО - уникальный ID */}
          <TodoItem id={todo.id} text={todo.text} />
        </li>
      ))}
    </ul>
  );
}

2. Проблемы с input fields

function EditableList({ items, onUpdate }) {
  const [values, setValues] = useState({});
  
  // ПЛОХО - индекс как ключ
  return items.map((item, index) => (
    <input
      key={index}
      value={values[index] || item.name}
      onChange={(e) => {
        const newValues = { ...values, [index]: e.target.value };
        setValues(newValues);
      }}
    />
  ));
  
  // Если переупорядочить items - input values потеряются
}

// ХОРОШО - ID как ключ
function EditableList({ items, onUpdate }) {
  const [values, setValues] = useState({});
  
  return items.map(item => (
    <input
      key={item.id}
      value={values[item.id] || item.name}
      onChange={(e) => {
        const newValues = { ...values, [item.id]: e.target.value };
        setValues(newValues);
      }}
    />
  ));
}

Когда index всё таки приемлем

Индекс можно использовать если:

1. Список никогда не переупорядочивается
2. Никогда не добавляются/удаляются элементы
3. Список не фильтруется

// Может быть - список городов, который загружается один раз
const cities = ['Moscow', 'London', 'Tokyo'];

function CityList() {
  return (
    <ul>
      {cities.map((city, index) => (
        <li key={index}>{city}</li>  // Приемлемо в этом случае
      ))}
    </ul>
  );
}

Вложенные списки

Когда у тебя несколько уровней списков, нужно комбинировать ключи:

function BoardGame({ game }) {
  return (
    <div>
      <h1>{game.title}</h1>
      {game.players.map(player => (
        <div key={player.id}>
          <h2>{player.name}</h2>
          <ul>
            {player.pieces.map((piece, pieceIndex) => (
              // Комбинируем ID игрока и индекс фигуры
              <li key={`${player.id}-${piece.id}`}>
                {piece.name}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

Производительность и ключи

Правильные ключи улучшают производительность:

// ПЛОХО - без ключей React пересоздаёт все элементы
function Items({ items }) {
  return items.map(item => <ExpensiveComponent data={item} />);
  // Каждый раз при обновлении списка все компоненты пересоздаются
}

// ХОРОШО - с ключами React обновляет только изменённые элементы
function Items({ items }) {
  return items.map(item => (
    <ExpensiveComponent key={item.id} data={item} />
  ));
  // React знает, какие компоненты переместились, добавились, удалились
}

Когда ключи не обязательны

Если элемент не содержит input fields или internal state:

// Может быть без ключа - просто отображение
function StatelessList({ items }) {
  return (
    <ul>
      {items.map(item => (
        // Просто текст - нет internal state
        <li>{item.name}</li>
      ))}
    </ul>
  );
}

Но это плохая практика - добавляй ключ всегда для consistency:

// ЛУЧШЕ - всегда с ключом
function StatelessList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

Заключение

Ключи - это механизм, который позволяет React:

1. Идентифицировать элементы в списках
2. Сохранять состояние компонентов при переупорядочении
3. Улучшать производительность при обновлении списков
4. Избегать ошибок с потерей состояния

Основное правило: всегда используй стабильный, уникальный ID (из БД или сгенерированный UUID), никогда не используй индекс, если список может изменяться.