Урок 03 · 12 хв
Список, key і ефект
Масив у JSX — `.map`. key — не індекс, якщо список рухається. Ефект — не для розрахунку.
Список малюють так: items.map((item) => <li key={item.id}>{item.title}</li>). key каже React, який рядок який, коли масив зсунувся. Індекс як key ламається під час вставки в середину: поля введення «переїдуть» на чужі рядки.
- Ключ стабільний і унікальний серед сусідів. Не Math.random() на кожен рендер.
- Ефект із fetch має вміти скасування або прапорець ignore, інакше відповідь старого запиту перезапише нову.
- Якщо з ефекту кличеш setState, а залежностей немає як слід, — отримаєш цикл.
Перевірка
Закріпи, поки не пішов далі
1. Навіщо key у списку?
2. Чому
items.push(x); setItems(items)часто не малює нове?3. Куди класти
const full = first + last?