Вопросы React Frontend Developer

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

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

Важно:

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

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

В обычных функциях this внутри setInterval/setTimeout теряется (становится window/undefined в strict mode). Стрелочные функции сохраняют this из внешнего контекста.

setInterval выполняет функцию с фиксированной задержкой, не учитывая частоту обновления экрана, что может приводить к пропуску кадров и лишним вычислениям. requestAnimationFrame синхронизирует выполнение кода анимации с частотой обновления экрана (обычно 60 кадров/с), что делает анимацию плавной и эффективной. Он также автоматически останавливается, когда пользователь переходит на другую вкладку, экономя ресурсы. Для плавных анимаций всегда следует предпочитать requestAnimationFrame.

setInterval продолжает работать даже после того, как компонент исчез со страницы, потому что он живёт отдельно от React. Если интервал не очистить, он будет дальше выполнять код, тратить ресурсы и может пытаться обновлять state уже размонтированного компонента. Это приводит к лишним вычислениям, странным багам и предупреждениям в консоли. Поэтому таймеры нужно останавливать в cleanup-функции useEffect.