Какво ще се случи, ако предадете индекса на масива като ключ?

Използването на индекса на масива като ключ (key) в React може да доведе до проблеми с производителността и точността при актуализиране на компонентите. Когато се променя редът на елементите или се вмъкват/изтриват елементи, индексите се променят, и React може неправилно да съотнесе компонентите, което ще доведе до ненужни повторни рендери или загуба на състояние.

Например, ако имате списък:

{items.map((item, index) => (
  <ListItem key={index} item={item} />
))}

И вмъкнете нов елемент в началото на масива, всички ключове ще се преместят, и React ще пресъздаде почти всички компоненти, въпреки че можеше да се актуализира само един.

По-добре е да използвате уникални и стабилни идентификатори от данните, например id:

{items.map(item => (
  <ListItem key={item.id} item={item} />
))}