Reactでカスタムフックにrefを渡すのは正しい？実装例と注意点を解説

ReactでDOMを扱う場面は少なくありません。スクロール位置の取得、クリック外の検知、IntersectionObserver などをカスタムフックとして切り出したい時、HTML要素のrefをカスタムフックの引数として渡す実装をよく見ます。

結論から言うと、ref をフックへ渡すのは一般的で正しいパターンです。この記事では、具体例と注意点をまとめます。

refは「呼び出し側」で生成するのがルール

React Hooks は状態やrefは「コンポーネント側」が責任を持つべき、という基本設計があります。

したがってフック内部で ref を useRef() してはいけません。

NGパターン

function useExample() {
  const ref = useRef(null);
  return ref;
}

OKパターン

function useExample(ref: React.RefObject<HTMLDivElement>) {
  // ここでDOM操作
}

refを渡す典型的ユースケース

DOMに関わるロジックをカスタムフックにまとめることで、コンポーネントがシンプルになるメリットがあります。

まとめ：カスタムフックにRefは、よく使うパターン

• ref をカスタムフックへ渡すのは問題ない
• むしろ設計としてよく使う
• ref の作成は呼び出し側（コンポーネント）
• フックは DOM 操作ロジックだけ担当する