React 16.8〜18 の全フック。落とし穴・TypeScript型・コード例付き。
ハンズオンで手を動かして学べます
useState・useEffect・useCallback の詳細ページから「ハンズオン」を開始できます。
useState状態管理React 16.8コンポーネントにローカルな状態を追加する最も基本的なフック。状態が変わると再レンダーが発生する。
オブジェクト・配列は必ず新しい参照を渡す（mutationは再レンダーされない）
useEffect副作用React 16.8副作用（データ取得・DOM操作・イベント登録など）をコンポーネントのレンダー後に実行する。クリーンアップ関数を返すことで後処理もできる。
依存配列を空 [] にしても、内部で使っている変数が外部から変わると古い値を参照し続ける（クロージャの罠）
useCallbackパフォーマンスReact 16.8関数をメモ化し、依存配列が変わらない限り同じ関数参照を返す。子コンポーネントへのprops渡しやuseEffectの依存配列に関数を含める際に使う。
すべての関数をuseCallbackでラップするのは逆にパフォーマンスを下げる可能性がある
useMemoパフォーマンスReact 16.8計算結果をメモ化し、依存配列が変わらない限り再計算しない。重い計算や参照を保持したいオブジェクトに使う。
useMemo はパフォーマンス最適化であり、セマンティクスの保証ではない（将来Reactがキャッシュを破棄する可能性がある）
useRefRef / DOMReact 16.8レンダーをまたいで値を保持できるミュータブルなオブジェクトを返す。DOM要素への参照取得と、再レンダーを起こさない値の保持に使われる。
useRefで取得したDOM要素はレンダー完了後にしかアクセスできない（useEffect内で使う）
useContextContextReact 16.8Contextの値を購読する。Providerで囲まれた最も近い祖先コンポーネントの値を返す。props drillingを解消するのに使う。
Contextの値がオブジェクトの場合、毎回新しいオブジェクトを渡すと全コンポーネントが再レンダーされる — useMemoで安定させる
useReducer状態管理React 16.8複雑な状態遷移をreduce関数で管理する。Reduxライクなパターンでコンポーネントの状態ロジックを整理できる。
reducerは純粋関数でなければならない — 副作用（APIコール等）をreducer内に書かない
useTransitionトランジションReact 18状態更新を「緊急でない」としてマークし、UIのブロッキングを防ぐ。重いレンダリングがある場合でもユーザー操作をサクサク保つ。
startTransition内でsetStateを同期的に呼ぶ必要がある — 非同期関数内では使えない（useDeferredValueを検討）
useDeferredValueトランジションReact 18値の更新を遅延させ、UIが重い場合でも古い値を表示し続ける。useTransitionとは異なり、値を渡すだけで制御できる。
deferredValueが古い値の間はUIが古い状態を表示する — opacity等で視覚的フィードバックを与えると良い
useLayoutEffect副作用React 16.8DOMの更新直後、ブラウザが描画する前に同期的に副作用を実行する。DOMのサイズ計測やスクロール位置調整に使う。
ほとんどの場合は useEffect で十分 — チラつきが起きる場合のみ useLayoutEffect に変更する
useIdRef / DOMReact 18アクセシビリティ属性（htmlFor, aria-labelledby等）に使うための一意なIDを生成する。SSRとCSRで一致するIDが生成される。
Math.random()やDate.now()でIDを生成するとSSRとCSRで不一致が起きHydrationエラーになる — useIdが解決策
useImperativeHandleRef / DOMReact 16.8親コンポーネントがrefを通じてアクセスできるメソッドをカスタマイズする。forwardRefと組み合わせて使う。
過度に使うとコンポーネント間の結合度が上がる — props/callbackで解決できないか先に検討する