Что такое key в объекте?

Что такое key в объекте?

Key — это идентификатор элемента в объекте или массиве, который помогает React эффективно отслеживать и обновлять компоненты при изменении списков.

Key в контексте React

Когда вы рендерите список элементов в React, key — это специальный prop, который помогает React определить, какие элементы были изменены, добавлены или удалены.

// Без key (плохо)
const todoList = todos.map(todo => (
  <li>{todo.text}</li>
));

// С key (хорошо)
const todoList = todos.map(todo => (
  <li key={todo.id}>{todo.text}</li>
));

Почему key важен?

1. Идентификация элементов

• React использует key для сопоставления старого списка с новым
• Без key React полагается на порядок элементов (index)

2. Сохранение состояния компонента

// Проблема: при удалении элемента состояние сбивается
todos.map((todo, index) => (
  <TodoItem key={index} todo={todo} />  // ❌ Неправильно
))

// Решение: используй уникальный идентификатор
todos.map(todo => (
  <TodoItem key={todo.id} todo={todo} />  // ✅ Правильно
))

3. Производительность

• С правильными key'ами React минимизирует пересоздание DOM элементов
• Обновляет только изменённые элементы, а не весь список

Примеры неправильного использования key

❌ Никогда не используй index как key (если список может измениться):

// Плохо: если удалить элемент, состояние сломается
const items = data.map((item, index) => (
  <Item key={index} value={item} />
));

❌ Не используй случайные значения:

// Плохо: каждый рендер будет новый key
const items = data.map(item => (
  <Item key={Math.random()} value={item} />
));

Правильное использование key

// ✅ Используй уникальный, стабильный идентификатор из данных
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const userList = users.map(user => (
  <UserCard key={user.id} user={user} />
));

// ✅ UUID для новых элементов
import { v4 as uuidv4 } from 'uuid';

const newTodo = {
  id: uuidv4(),
  text: 'Новая задача'
};

Key в объектах JavaScript

Key в объекте — это свойство, которое идентифицирует значение:

const person = {
  name: 'John',      // key: 'name'
  age: 30,           // key: 'age'
  email: 'john@...'  // key: 'email'
};

console.log(person['name']);  // 'John'
console.log(person.age);      // 30

Key в Map и Set (ES6)

// Map с объектами как keys
const userMap = new Map();
userMap.set({ id: 1 }, 'Alice');
userMap.set({ id: 2 }, 'Bob');

// Key может быть любого типа (объект, функция, примитив)
const config = new Map([
  ['theme', 'dark'],
  ['language', 'ru']
]);

Best Practices

✅ Правила использования key:

1. Всегда используй key при рендеринге списков
2. Key должен быть уникальным среди соседних элементов
3. Key должен быть стабильным (не меняться между рендерами)
4. Используй данные (id, uuid), а не индекс или Math.random()

✅ Реальный пример с фильтрацией:

function TodoList({ todos }) {
  const [filter, setFilter] = useState('');
  
  const filteredTodos = todos.filter(todo => 
    todo.text.includes(filter)
  );
  
  return (
    <>
      <input 
        value={filter}
        onChange={e => setFilter(e.target.value)}
      />
      <ul>
        {filteredTodos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </>
  );
}

Key — критически важная концепция в React, которая обеспечивает корректность работы списков и оптимальную производительность приложения.