😢 Ключи в списках: почему 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

⭐️ Типовая ловушка с :focus-within и :not() в формах

Многие используют эти псевдоклассы для управления состояниями форм и элементов, но есть ловушки:

➡️ Почему так:

1. :focus-within реагирует только на фокус внутри самого элемента, не на внешние события.

2. :not() может «съесть» вложенные селекторы неправильно — порядок и специфичность важны.

3. Если элемент содержит другие интерактивные элементы (кнопки, ссылки), браузер может вести себя по-разному.

➡️ Как исправить:

— Использовать более точные селекторы и отдельные правила для состояния фокуса.

— Проверять вложенные элементы: :focus-within смотрит любые потомки, не только input.

— Не смешивать :not() с сложными вложенными селекторами — часто проще добавить класс через JS.

✅ Проверяйте конкретный DOM и порядок CSS-правил.

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

#hotfix #css