React

🔍 Чекни скрытые баги в React: неправильное использование ключей в списках

Если ты рендеришь список компонентов и используешь 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

www.tg-me.com/ua/React/com.React_lib/670

1.1K viewsApr 18 at 08:38

🔍 Чекни скрытые баги в React: неправильное использование ключей в списках

Если ты рендеришь список компонентов и используешь index в качестве key, будь осторожен — это может привести к непредсказуемым багам UI.

📉 Что может пойти не так:
- Компоненты не будут корректно обновляться при изменении порядка;
- Сохранённое состояние внутри компонентов (например, в инпутах) будет сбиваться;
- Возрастает шанс багов при анимациях и переходах.

📌 Плохо:

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

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

BY React