Выполнять код каждую секунду (Таймер)

В React есть хук useEffect(), который выполняется после создания компонента.

export function App() {

  useEffect(() => {
      // выполнять код после создания приложения
  })

  return (
    <div className="react-app">
      Приложение на React
    </div>
  );

}

В данном методе можно добавить функцию setInterval(), которая задаёт интервал выполнения указанного кода.

import { useEffect, useState } from 'react';

export function App() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    // выполнять код каждую секунду
    const interval = setInterval(() => {
      setSeconds(seconds+1)
    }, 1000);

    return () => clearInterval(interval);
  });

  return (
      <p>Прошло секунд: {seconds}</p>
  );
}

Пример кода на Playcode

Ключевое слово return внутри useEffect() вызывается тогда, когда идёт изменение состояния. Т.е. перед тем, как приложение снова отрендериться, идёт деактивация текущего счётчика, и запуск нового, уже с изменёнными данным.

Данный механизм работы называется «функция очистки».

Раньше для данных целей использовался componentDidMount(), но сейчас он считается устаревшим, и вместо него используется хук useEffect().

Также внутри useEffect() иногда надо использовать параметры. Передать данные параметры можно через следующий код:

useEffect(() => {
  if (runTimer) {
    const interval = setInterval(() => {
      setSeconds(seconds+1)
    }, 1000);

    return () => clearInterval(interval);
  }
}, [runTimer]);