😢 Ключи в списках: почему index ломает

❌ Было:

{items.map((item, index) => (
  <li key={index}>
    <input value={item.name} />
  </li>
))}

➡️ Переставили элементы → React думает, что <li key=0> остался тем же.
В итоге сбивается фокус и теряется ввод.

✅ Стало:

{items.map((item) => (
  <li key={item.id}>
    <input value={item.name} />
  </li>
))}

➡️ Стабильный id сохраняет правильное соответствие элементов, и UI ведёт себя предсказуемо.

💡 Используйте index только если список точно статичен (например, меню без состояния). В остальных случаях всегда нужен стабильный уникальный ключ (id).

🐸 Библиотека фронтендера

#hotfix #react

🌪 useEffect и зависимости

На картинке 3 кейса:

➡️ Забыли проп в deps → эффект не срабатывает при изменении данных

➡️ Положили объект/функцию → эффект запускается каждый ререндер

➡️ Скаляр в deps → всё стабильно, эффект срабатывает ровно при нужном изменении

⌨️ Совет:

— Всегда указывайте все зависимости эффекта

— Если зависимость нестабильна (объект/функция) → мемоизируйте (useMemo, useCallback)

— Примитивы (строка, число) в deps — самый безопасный вариант

🐸 Библиотека фронтендера

#hotfix #react

🔥 Проп-спрединг без фильтрации

На картинке 3 ситуации:

➡️ Передали ...props в корневой <div> → в DOM улетают лишние атрибуты

➡️ Поймали warning в консоли и начали гадать откуда он

➡️ Правильный вариант → деструктурируем нужные props и явно прокидываем

⌨️ Рекомендации:

— Никогда не спредьте всё подряд в корень

— Лишние атрибуты → лишние баги

— Чётко указывайте только то, что действительно нужно в DOM

🐸 Библиотека фронтендера

#hotfix #react