Задача на live coding: починить счётчик с setInterval в useEffect, который работает некорректно из-за проблемы с замыканием

Для типичного stale closure счётчика используйте функциональное обновление state и очищайте interval при размонтировании.

Короткий ответ

Что ответить на собеседовании

Для типичного stale closure счётчика используйте функциональное обновление state и очищайте interval при размонтировании.

Подробный разбор

Ответ с пояснениями

Для типичного stale closure счётчика используйте функциональное обновление state и очищайте interval при размонтировании.

Пример исправленного эффекта:

useEffect(() => {
  const id = setInterval(() => setCount(count => count + 1), 1000);
  return () => clearInterval(id);
}, []);

Setter получает актуальное значение из очереди обновлений, а не count первого render. Если callback зависит от других меняющихся данных, их жизненный цикл нужно учесть отдельно; это не универсальное исправление любого interval.

ИИ-помощник для собеседований

Хочешь уверенно проходить собеседования?

Попробуй ИИ-помощник для собеседований: слышит вас и собеседника, анализирует экран, подсказывает ответы в реальном времени, работает без VPN и не попадает в захват экрана.

Подробнее