第10章 Hooks大全

10.1 Hooksのルール

1. Hooksはトップレベルで呼ぶ
2. HooksはReactコンポーネントまたはカスタムHookから呼ぶ
3. 条件分岐・ループ・ネスト関数内で呼ばない
4. ESLintルールを有効にする

// 禁止
if (enabled) {
  const [value, setValue] = useState("");
}

Reactは呼び出し順序でHookの状態を対応付ける。

10.2 state系

Hook	用途
useState	局所state
useReducer	複雑な更新規則
useActionState	Actionの結果・pending状態

10.3 Context系

Hook/API	用途
createContext	Context作成
use	ContextまたはPromiseの読み取り
useContext	Contextの読み取り

useは通常のHookと異なり、条件やループで呼べる。ただしtry/catch内では使えないなど固有の制約がある。

10.4 Ref系

Hook	用途
useRef	値・DOM参照
useImperativeHandle	公開ref APIの制御

10.5 Effect系

Hook	用途
useEffect	外部システムとの同期
useLayoutEffect	描画前の同期
useInsertionEffect	CSS-in-JSライブラリ向け
useEffectEvent	Effect内の非リアクティブ処理

10.6 パフォーマンス・優先度系

Hook/API	用途
useMemo	値の手動メモ化
useCallback	関数の手動メモ化
useTransition	非緊急更新
startTransition	非緊急更新の開始
useDeferredValue	値の遅延
useId	hydration対応の一意ID

React Compiler利用時、useMemoとuseCallbackの必要性は減るが、意味的に安定した参照が必要な外部APIなどでは残る。

10.7 外部ストア・デバッグ

Hook	用途
useSyncExternalStore	外部ストア購読
useDebugValue	カスタムHookのDevTools表示

10.8 カスタムHook

function useOnlineStatus() {
  return useSyncExternalStore(
    callback => {
      window.addEventListener("online", callback);
      window.addEventListener("offline", callback);

      return () => {
        window.removeEventListener("online", callback);
        window.removeEventListener("offline", callback);
      };
    },
    () => navigator.onLine,
    () => true
  );
}

カスタムHookはロジックを共有するが、stateそのものを複数利用箇所で共有するわけではない。各呼び出しは独立したstateを持つ。

---