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

Правильная реализация:

import { useEffect } from 'react';

const TimerComponent = () => {
  useEffect(() => {
    const intervalId = setInterval(() => {
      console.log('Hello world');
    }, 10000);

    return () => {
      clearInterval(intervalId); // Остановка при размонтировании
    };
  }, []); // Пустой массив = только при монтировании

  return <div>Check console!</div>;
};

Ошибки и нюансы:

1. Без очистки → Утечка памяти, если компонент удаляется.

2. Зависимости в [] — если добавить переменные, эффект будет перезапускаться при их изменении.

3. Использование useState внутри интервала:

   const [count, setCount] = useState(0);
   useEffect(() => {
     const id = setInterval(() => {
       setCount(count + 1); // Будет всегда использовать начальное значение `count`!
     }, 1000);
     return () => clearInterval(id);
   }, []); // Неправильно!

   Решение:

   setCount(prev => prev + 1); // Использовать функциональную форму

Вывод: Всегда очищайте таймеры и учитывайте замыкания!