Используйте ловушку React для реализации счетчика с самоприращением

Вы можете указать пустой массив в качестве второго аргумента для useEffect, чтобы функция запускалась только один раз после первоначального рендеринга. Из-за того, как работают замыкания, это заставит переменную counter всегда ссылаться на начальное значение. Затем вы можете вместо этого использовать функциональную версию setCounter, чтобы всегда получать правильное значение.

Пример

const { useState, useEffect } = React;

function App() {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCounter(counter => counter + 1);
    }, 1000);

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

  return <h1>{counter}</h1>;
};

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

<script src = "https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src = "https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id = "root"></div>

Более универсальным подходом было бы создание новой пользовательской ловушки, которая хранит функцию в ref и создает новый интервал, только если delay должен измениться, как это делает Дэн Абрамов в своем замечательном сообщении в блоге "Делаем setInterval декларативным с помощью React Hooks".

Пример

const { useState, useEffect, useRef } = React;

function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    let id = setInterval(() => {
      savedCallback.current();
    }, delay);
    return () => clearInterval(id);
  }, [delay]);
}

function App() {
  const [counter, setCounter] = useState(0);

  useInterval(() => {
    setCounter(counter + 1);
  }, 1000);

  return <h1>{counter}</h1>;
};

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

<script src = "https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src = "https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id = "root"></div>

Как уже показывает другой ответ от @YangshunTay, можно сделать так, чтобы обратный вызов useEffect запускался только один раз и работал аналогично componentDidMount. В этом случае необходимо использовать функцию обновления состояния из-за ограничений, накладываемых областями функций, иначе обновленный counter не будет доступен внутри обратного вызова setInterval.

Альтернативный вариант - запускать обратный вызов useEffect при каждом обновлении счетчика. В этом случае setInterval следует заменить на setTimeout, а обновления должны быть ограничены обновлениями counter:

export default ({ name }: Props) => {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    const timeout = setTimeout(() => {
      setCounter(counter + 1);
    }, 1000);

    return () => {
      clearTimeout(timeout);
    };
  }, [counter]);

  return <h1>{counter}</h1>;
};

Правильный способ сделать это - запустить эффект только один раз. Поскольку вам нужно запустить эффект только один раз, потому что во время монтирования вы можете передать пустой массив в качестве второго аргумента для достижения.

Однако вам нужно будет изменить setCounter, чтобы использовать предыдущее значение counter. Причина в том, что обратный вызов, переданный в закрытие setInterval, обращается только к переменной counter в первом рендеринге, у него нет доступа к новому значению counter в последующем рендеринге, потому что useEffect() не вызывается во второй раз; counter всегда имеет значение 0 в обратном вызове setInterval.

Как и в случае с setState, с которым вы знакомы, хуки состояния имеют две формы: одну, в которой он принимает обновленное состояние, и форму обратного вызова, в которую передается текущее состояние. Вы должны использовать вторую форму и считывать последнее значение состояния в setState. обратный вызов, чтобы убедиться, что у вас есть последнее значение состояния, прежде чем увеличивать его.

function Counter() {
  const [counter, setCounter] = React.useState(0);
  React.useEffect(() => {
    const timer = setInterval(() => {
      setCounter(prevCount => prevCount + 1); // <-- Change this line!
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []); // Pass in empty array to run effect only once!

  return (
    <div>Count: {counter}</div>
  );
}

ReactDOM.render(<Counter />, document.querySelector('#app'));

<script src = "https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src = "https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id = "app"></div>