useRef

使いたい場面↓

使いたい場面	useRefが便利！
DOMを触りたい	✅ OK
直近の値を保持したい	✅ OK
でも画面を再描画したくない	✅ OK

フォーカスを当てる

const inputRef = useRef<HTMLInputElement>(null);

useEffect(() => {
  inputRef.current?.focus(); // フォーカスする！
}, []);

return <input ref={inputRef} />;

？について

例	名前	意味	JS/TS
a?.b	オプショナルチェイニング	a があるときだけ b にアクセス	JS(ES2022以降) / TS
age?: number	オプショナルプロパティ	age はあってもなくてもOK	TSのみ
function foo(a?: string)	オプショナル引数	引数は省略可能	TSのみ

TSでよく使うDOM型の例

型	対応する要素	説明
HTMLInputElement	<input>	テキスト入力など
HTMLTextAreaElement	<textarea>	テキストエリア
HTMLButtonElement	<button>	ボタン
HTMLDivElement	<div>	div要素
HTMLImageElement	<img>	画像
HTMLAnchorElement	<a>	リンクタグ
HTMLSelectElement	<select>	プルダウン
HTMLFormElement	<form>	フォームタグ全体
HTMLElement	すべての HTML 要素	ざっくり全部カバー（最も汎用）

スクロールやサイズの取得

const divRef = useRef<HTMLDivElement>(null);

useEffect(() => {
  console.log(divRef.current?.offsetHeight);
}, []);

タイマーや外部ライブラリとの連携

const timerRef = useRef<number | null>(null);

useEffect(() => {
  timerRef.current = window.setInterval(() => {
    console.log("tick");
  }, 1000);

  return () => {
    if (timerRef.current) clearInterval(timerRef.current); // クリーンアップ
  };
}, []);

状態をリレンダーさせずに保持したいとき

const countRef = useRef(0);

const handleClick = () => {
  countRef.current++;
  console.log("クリック数:", countRef.current);
};