useEffect完全ガイドを読んだ

useEffect完全ガイド

React Hooksでタイマーで定期的にインクリメントされるカウンターみたいなのを作るのにrefを使っていましたが、もっと楽にできたみたいです。

function useTimer(): [number, React.Dispatch<React.SetStateAction<number>>] {
  const [count, setCount] = React.useState(0);
  
  const countRef = React.useRef(count);
  React.useEffect(() => {
    countRef.current = count;
  }, [count]);

  React.useEffect(() => {
      const timerId = setInterval(() => {
          setCount(countRef.current + 1);
      }, 1000);

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

  return [ count, setCount ];
}

なんて書いていましたが、「関数型の更新」を使えば:

function useTimer(): [number, React.Dispatch<React.SetStateAction<number>>] {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
      const timerId = setInterval(() => {
          setCount(c => c + 1);
      }, 1000);

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

  return [ count, setCount ];
}

で済んでしまう。うーん、マニュアルはちゃんと読まないといけませんね。Reducerも使ってみないとだ。