Если ты рендеришь список компонентов и используешь
index в качестве key, будь осторожен — это может привести к непредсказуемым багам UI.📉 Что может пойти не так:
- Компоненты не будут корректно обновляться при изменении порядка;
- Сохранённое состояние внутри компонентов (например, в инпутах) будет сбиваться;
- Возрастает шанс багов при анимациях и переходах.
📌 Плохо:
{items.map((item, index) => (
<Card key={index} data={item} />
))}
✅ Хорошо:
{items.map((item) => (
<Card key={item.id} data={item} />
))}
🎯 Совет: используй
id, UUID или стабильные ключи из данных. Если данных нет — скорее всего, нужно пересмотреть архитектуру.Подробный разбор от React team:
https://react.dev/learn/rendering-lists#choosing-the-key
✍️ @React_lib