React 16.8〜18 の全フック。落とし穴・TypeScript型・コード例付き。
ハンズオンで手を動かして学べます
useState・useEffect・useCallback の詳細ページから「ハンズオン」を開始できます。
useState状態管理React 16.8オブジェクト・配列は必ず新しい参照を渡す（mutationは再レンダーされない）
useEffect副作用React 16.8依存配列を空 [] にしても、内部で使っている変数が外部から変わると古い値を参照し続ける（クロージャの罠）
useCallbackパフォーマンスReact 16.8すべての関数をuseCallbackでラップするのは逆にパフォーマンスを下げる可能性がある
useMemoパフォーマンスReact 16.8useMemo はパフォーマンス最適化であり、セマンティクスの保証ではない（将来Reactがキャッシュを破棄する可能性がある）
useRefRef / DOMReact 16.8useRefで取得したDOM要素はレンダー完了後にしかアクセスできない（useEffect内で使う）
useContextContextReact 16.8Contextの値がオブジェクトの場合、毎回新しいオブジェクトを渡すと全コンポーネントが再レンダーされる — useMemoで安定させる
useReducer状態管理React 16.8reducerは純粋関数でなければならない — 副作用（APIコール等）をreducer内に書かない
useTransitionトランジションReact 18startTransition内でsetStateを同期的に呼ぶ必要がある — 非同期関数内では使えない（useDeferredValueを検討）
useDeferredValueトランジションReact 18deferredValueが古い値の間はUIが古い状態を表示する — opacity等で視覚的フィードバックを与えると良い
useLayoutEffect副作用React 16.8ほとんどの場合は useEffect で十分 — チラつきが起きる場合のみ useLayoutEffect に変更する
useIdRef / DOMReact 18Math.random()やDate.now()でIDを生成するとSSRとCSRで不一致が起きHydrationエラーになる — useIdが解決策
useImperativeHandleRef / DOMReact 16.8過度に使うとコンポーネント間の結合度が上がる — props/callbackで解決できないか先に検討する