Open2ヶ月前にコメント追加1

React の setInterval と useState を組み合わせる方法

結論

Functional update を使う方法もあるが、結局この方法が一番万能な気がする。

import { useState, useEffect, useRef, useCallback } from 'react';

export function App(props) {
  const [count, setCount] = useState(0);

  const callback = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  const callbackRef = useRef(callback);

  useEffect(() => {
    callbackRef.current = callback;
  }, [count]);

  useEffect(() => {
    const timerId = setInterval(() => {
      callbackRef.current();
    }, 1000);

    return () => clearInterval(timerId);
  }, []);

  return (
    <dl>
      <dt>Count</dt>
      <dd>{count}</dd>
    </dl>
  );
}

素晴らしい記事をありがとう。