Key Flashcards
Key
✅ Что нужно использовать в качестве key ?
При реальной разработке в качестве key берутся id из базы данных, которые всегда уникальны
Если вы работаете с локальными данными, то в качестве key в документации рекомендуют использовать crypto.randomUUID() или установить дополнительный пакет uuid
❌ Что не нужно использовать в качестве key ?
index элемента массива.
На самом деле, именно index элемента массива будет использовать React, если вы вообще не укажете ключ. Но порядок отображения элементов будет меняться со временем, если элемент будет вставлен, удален или если массив будет переупорядочен. Индекс в качестве ключа часто приводит к тонким и запутанным ошибкам.
Индекс лучше всего использовать, если массив не изменяется (т.е. не будет удаления, добавления и т.д.)
Math.random()
Это приведет к тому, что ключи никогда не будут совпадать между рендерами, что приведет к тому, что все ваши компоненты и DOM будут каждый раз создаваться заново. Это не только медленно, но и приведет к потере пользовательского ввода внутри элементов списка.
<li key={task.id}>
<input type=”checkbox” checked={task.isDone} />
<span>{task.title}</span>
</li>
