🤔 Для чего нуден key при работе со списками?

В React при рендере списков (например, через .map()) каждому элементу необходимо передавать уникальный key. Это помогает React оптимизировать перерисовку и правильно отслеживать изменения в списке.

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

React использует виртуальный DOM и при обновлении сравнивает новый список с предыдущим.
Без key React не понимает, какие элементы изменились, удалились или добавились.
Это может привести к неожиданному поведению, например, сбросу состояния или неправильному рендеру.

🚩Как использовать `key` правильно?

const users = ["Alice", "Bob", "Charlie"];

function UserList() {
return (

{users.map((user, index) => (
{user} // Хорошо, если `user` уникален
))}

);
}

🚩Что будет без `key`?

Если не указать key, React выдаст предупреждение:
Warning: Each child in a list should have a unique "key" prop.

Кроме того, при изменении списка возможны проблемы с перерисовкой
{users.map((user, index) => (

))}

Ставь 👍 и забирай 📚 Базу знаний