> Какие уязвимости или баги известны у React хука useEffect и как получить неожиданное поведение (React)

Основные проблемы с useEffect связаны с неправильным пониманием его механизма и некорректным управлением зависимостями.

1. Замыкания (stale closures): Самая частая ошибка - использование устаревшего значения переменной внутри эффекта. Если эффект захватывает значение из рендера, а зависимость не указана в массиве, эффект будет работать с «замороженным» значением. Пример: useEffect(() => { setInterval(() => setCount(count + 1), 1000) }, []) - count всегда будет 0.

2. Пропуск зависимостей: Неуказание всех используемых переменных в массиве зависимостей приводит к тому, что эффект не перезапускается при их изменении. ESLint-правило react-hooks/exhaustive-deps помогает это отследить.

3. Бесконечные циклы: Если в эффекте обновляется состояние, которое является его зависимостью, возникает бесконечный ререндер. Например: useEffect(() => setCount(count + 1), [count]).

4. Неверная очистка (cleanup): Если эффект подписывается на событие или создает таймер, а функция очистки не отменяет их, при размонтировании компонента возникают утечки памяти и ошибки (например, обновление размонтированного компонента).

5. Асинхронные эффекты: Попытка сделать useEffect(async () => {...}) - недопустима, так как возвращается промис, а не функция очистки. Нужно оборачивать асинхронный код во внутреннюю функцию.

6. Неожиданное поведение при строгом режиме (StrictMode): В режиме разработки React дважды вызывает эффект и его очистку, что может выявить проблемы с инициализацией, но также сбивает с толку новичков.

Чтобы получить неожиданное поведение, достаточно написать эффект, который мутирует внешние данные или использует состояние без указания его в зависимостях.