Как написать React-компонент, чтобы при монтировании запускался setInterval, выводящий в консоль "Hello world" каждые 10 секунд? Что важно учесть при такой реализации с setInterval?

Question

useEffect(() => {
  const intervalId = setInterval(() => {
    console.log('Hello world');
  }, 10000);
  return () => clearInterval(intervalId); // Очистка при размонтировании
}, []);Важно:Очистка в return — иначе интервал будет работать после удаления компонента.Пустой массив зависимостей [] — чтобы эффект выполнился только при монтировании.

YeaHub · Accepted Answer

Правильная реализация:import { useEffect } from 'react'; const TimerComponent = () => { useEffect(() => { const intervalId = setInterval(() => { console.log('Hello world'); }, 10000); return () => { clearInterval(intervalId); // Остановка при размонтировании }; }, []); // Пустой массив = только при монтировании return

Check console!

; };Ошибки и нюансы:Без очистки → Утечка памяти, если компонент удаляется.Зависимости в [] — если добавить переменные, эффект будет перезапускаться при их изменении.Использование useState внутри интервала:const [count, setCount] = useState(0); useEffect(() => { const id = setInterval(() => { setCount(count + 1); // Будет всегда использовать начальное значение `count`! }, 1000); return () => clearInterval(id); }, []); // Неправильно!Решение:setCount(prev => prev + 1); // Использовать функциональную формуВывод: Всегда очищайте таймеры и учитывайте замыкания!