Ошибки ИИ в React и чек-лист

что проверять, кроме «открылось и работает»

Что это

Завершение главы и всего блока про фронтенд. React добавляет к ошибкам из глав 8 и 9 свои — и почти все они не видны при беглой проверке: экран открылся, данные показались, кнопка нажимается.

Десять ошибок ИИ в React

1. Нет key или key={index} в списке. При удалении из середины данные съезжают на соседей (статья 10.2).

2. useEffect без массива зависимостей, меняющий состояние, — бесконечный цикл. Измерено: 49 выполнений вместо одного (статья 10.4).

3. Неполный массив зависимостей. Эффект работает со старым значением.

4. Нет уборки. setInterval, подписка или fetch без отмены переживают компонент.

5. setState подряд с зависимостью от старого значения. Три вызова дают +1 вместо +3 (статья 10.3).

6. Состояние вместо вычисления. Лишний useState + useEffect там, где хватит одной строки.

7. Сделано только удачное состояние. Нет загрузки, пустоты и ошибки (статья 10.5).

8. {items.length && ...} — на пустом списке выведет «0».

9. Пропсы без типов или с any. Теряется всё, что даёт TypeScript (статья 9.5).

10. Секреты в коде фронтенда. Всё, что попало в сборку, видно пользователю (статья 10.1).

Чек-лист React-кода

К чек-листу фронтенда (статья 8.5) добавляется шесть шагов.

1. Проверка типов

npx tsc --noEmit

Ловит пропсы: забытые, не того типа, с другой сигнатурой обработчика.

2. Линтер с правилами хуков

npx eslint .

Правило react-hooks/exhaustive-deps ловит неполные массивы зависимостей — то, что глазами почти не видно.

3. Консоль

F12. React пишет туда предупреждения о key, о состоянии после удаления компонента, о неверных пропсах. Красного и жёлтого быть не должно.

4. Сеть при открытии экрана

Вкладка «Сеть» (статья 8.4). Сколько запросов уходит при открытии? Один-два — нормально. Десятки и растущий счётчик — тот самый цикл из пункта 2.

5. Четыре состояния

• Загрузка — замедлить сеть в инструментах разработчика.
• Пусто — удалить все записи.
• Ошибка — отключить сеть и перезагрузить.
• Данные — обычный случай.

Первые три проверяют почти никогда, и именно там живут ошибки.

6. Быстрые повторные действия

Нажать кнопку пять раз подряд. Быстро переключить вкладки. Это ловит и setState из пункта 5, и состояние гонки из пункта 4.

Как сказать ИИ

Проверь свой React-код по списку:
- есть ли key и не по индексу ли
- у всех ли useEffect есть массив зависимостей и полный ли он
- есть ли уборка у подписок, таймеров и запросов
- есть ли setState подряд с зависимостью от старого значения
- реализованы ли состояния загрузки, пустоты и ошибки
- есть ли any в пропсах

Что из этого есть? Если ничего — так и скажи.

Этот экран сделан только для случая «данные пришли».
Добавь загрузку, пустой список и ошибку с кнопкой «Повторить».
Существующую разметку не переписывай.

Шпаргалка