useRef

// DOM要素への参照
const inputRef = useRef<HTMLInputElement>(null);
// 任意の値の保持（再レンダーなし）
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);

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

// ── ① DOM要素への参照を取得する ──────────────────────
function FocusInput() {
  // useRef で DOM 要素への参照を作る
  // 初期値は null（まだ DOM がないので）
  const inputRef = useRef<HTMLInputElement>(null);

  // ボタンを押したら入力欄にフォーカスを当てる
  const handleFocus = () => {
    // inputRef.current が DOM 要素（null チェック必須）
    inputRef.current?.focus();
  };

  return (
    <div>
      {/* ref={inputRef} で DOM 要素に参照を接続 */}
      <input ref={inputRef} placeholder="ここにフォーカス" />
      <button onClick={handleFocus}>フォーカス</button>
    </div>
  );
}

// ── ② 再レンダーをまたいで値を保持する（stateと違いUIに影響しない）
function StopWatch() {
  const [running, setRunning] = useState(false);
  // タイマーIDをrefで保持（変更してもUIは再描画されない）
  const timerIdRef = useRef<ReturnType<typeof setInterval> | null>(null);

  const start = () => {
    setRunning(true);
    timerIdRef.current = setInterval(() => {
      // 経過時間を更新...
    }, 100);
  };

  const stop = () => {
    setRunning(false);
    if (timerIdRef.current) {
      clearInterval(timerIdRef.current); // ref から取り出してクリア
    }
  };

  return <button onClick={running ? stop : start}>{running ? '停止' : '開始'}</button>;
}