Вопросы React Frontend Developer

setTimeout выполняет указанную функцию один раз через заданное время, а setInterval — периодически, с указанным интервалом. Оба метода работают асинхронно, что значит, что они не блокируют основной поток выполнения программы. Чтобы остановить выполнение setInterval, нужно вызвать clearInterval, а для остановки отложенного вызова setTimeout — clearTimeout.

useEffect(() => {
  const intervalId = setInterval(() => {
    console.log('Hello world');
  }, 10000);
  return () => clearInterval(intervalId); // Очистка при размонтировании
}, []);

Важно:

1. Очистка в return — иначе интервал будет работать после удаления компонента.

2. Пустой массив зависимостей [] — чтобы эффект выполнился только при монтировании.

setTimeout не гарантирует выполнение callback ровно через указанное время. Он гарантирует, что callback не выполнится раньше, чем пройдёт заданная задержка. После истечения задержки callback попадает в очередь задач и будет выполнен, когда освободится call stack. На фактическое время влияет нагрузка, блокировки и приоритеты очередей. Поэтому таймер часто срабатывает позже.

setTimeout может выполниться позже, потому что после истечения времени callback попадает в очередь задач и ждёт своей очереди. Если основной поток занят синхронным кодом, выполнение откладывается. Также задержку увеличивают microtask, рендер и обработка событий. В фоне браузер может специально замедлять таймеры. Поэтому задержка может стать заметно больше, чем указанное значение.

Проще всего хранить “прошедшие секунды” в useState, а запуск обновления сделать в useEffect через setInterval. Внутри интервала увеличивать значение каждую секунду через функциональное обновление setState(prev => prev + 1). Обязательно вернуть функцию очистки, чтобы остановить интервал при размонтировании. Для более точного секундомера лучше хранить startTime в useRef и пересчитывать прошедшее время от реального времени, чтобы уменьшить “дрейф”.