useRefとuseStateを描画回数の違いで使い分ける方法

// クリックの回数を state に入れる
export function StateCounter() {
  const [count, setCount] = useState(0);
  log(`描画 StateCounter count=${count}`);

  return (
    <div>
      <p className="value">表示：{count}回</p>
      <button className="plus" onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

// クリックの回数を ref に入れる（画面に出す値を ref に入れた、よくない例）
export function RefCounter() {
  const countRef = useRef(0);
  const [, setTick] = useState(0);
  log(`描画 RefCounter countRef.current=${countRef.current}`);

  return (
    <div>
      <p className="value">表示：{countRef.current}回</p>
      <button
        className="plus"
        onClick={() => {
          countRef.current = countRef.current + 1;
          log(`クリック後 countRef.current=${countRef.current}`);
        }}
      >
        +1
      </button>
      <button className="rerender" onClick={() => setTick((t) => t + 1)}>
        別の state を更新
      </button>
    </div>
  );
}

--- はじめの描画
描画 StateCounter count=0
描画 RefCounter countRef.current=0
--- StateCounter の +1 を3回クリック
描画 StateCounter count=1
描画 StateCounter count=2
描画 StateCounter count=3
画面 StateCounter: 表示：3回
--- RefCounter の +1 を3回クリック
クリック後 countRef.current=1
クリック後 countRef.current=2
クリック後 countRef.current=3
画面 RefCounter: 表示：0回
--- RefCounter の「別の state を更新」をクリック
描画 RefCounter countRef.current=3
画面 RefCounter: 表示：3回

// タイマーの ID を ref に入れる
export function StopwatchRef() {
  const [ticks, setTicks] = useState(0);
  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
  log(`描画 ref ticks=${ticks}`);

  function handleStart() {
    intervalRef.current = setInterval(() => setTicks((t) => t + 1), TICK_MS);
  }
  function handleStop() {
    log(`停止 intervalRef.current=${intervalRef.current === null ? 'null' : 'ID あり'}`);
    if (intervalRef.current !== null) clearInterval(intervalRef.current);
    intervalRef.current = null;
  }

  return <Buttons ticks={ticks} onStart={handleStart} onStop={handleStop} />;
}

=== タイマーの ID を let に入れる
はじめの描画: 描画 1回
開始をクリック: 描画 0回
450ms 待つ: 描画 4回 表示=4
停止をクリック: 停止 intervalId=undefined 描画 0回
さらに 450ms 待つ: 描画 5回 表示=9
=== タイマーの ID を state に入れる
はじめの描画: 描画 1回
開始をクリック: 描画 1回
450ms 待つ: 描画 4回 表示=4
停止をクリック: 停止 intervalId=ID あり 描画 1回
さらに 450ms 待つ: 描画 0回 表示=4
=== タイマーの ID を ref に入れる
はじめの描画: 描画 1回
開始をクリック: 描画 0回
450ms 待つ: 描画 4回 表示=4
停止をクリック: 停止 intervalRef.current=ID あり 描画 0回
さらに 450ms 待つ: 描画 0回 表示=4

function handleClick() {
  setCount(count + 1);
  countRef.current = countRef.current + 1;
  log(`直後に読む count=${count} countRef.current=${countRef.current}`);
  setTimeout(() => {
    log(`500ms 後に読む count=${count} countRef.current=${countRef.current}`);
  }, 500);
}

直後に読む count=0 countRef.current=1
500ms 後に読む count=0 countRef.current=1

--- はじめの描画
描画 StateCounter count=0
描画 StateCounter count=0
--- +1 を1回クリック
描画 StateCounter count=1
描画 StateCounter count=1