React HooksExplained

24 of 24 rows

フック↕	何をするか↕	用途↕
State
⤢useState	変更されると再レンダーを引き起こす単一の値を保持する。	コンポーネントのローカルstate。フォーム項目、トグル、カウンターなど。
⤢useReducer	アクションのreducerで駆動されるstateを保持する。小さなストアのようなもの。	複数の関連するフィールドや複雑な遷移を持つstate。
⤢useRef	再レンダーを引き起こさないミュータブルな値を保持する。	ミュータブルな入れ物、タイマー、.currentによる直接のDOMアクセス。
Effect
⤢useEffect	レンダーの後に副作用を実行する。クリーンアップは省略可能。	データの取得、サブスクリプション、外部システムとの同期。
⤢Effect cleanup	effectが返す関数は、次のeffectの前とアンマウント時にもう一度実行される。	サブスクリプションやタイマーの解体、進行中のfetchの中断。
⤢useLayoutEffect	useEffectと同じだが、DOM変更の直後に同期的に実行される。	ブラウザがペイントする前のレイアウトの読み書き(トースト、ツールチップ)。
⤢useEffect vs handlers	イベントハンドラーはユーザーの操作に応じて実行され、effectは同期のためにレンダー後に実行される。	ユーザー起因のロジックはハンドラーに、レンダー起因のロジックはeffectに置く。
⤢StrictMode	開発モードではコンポーネントを2回マウントし、effectが実行、クリーンアップ、再実行される。	本番前に、二重のサブスクリプションやクリーンアップの欠落を発見する。
パフォーマンス
⤢useMemo	依存関係が変わるまで、計算された値をキャッシュする。	レンダー間の高コストな再計算の回避。意図的にdeps内の値を変えればキャッシュを破棄できる。
⤢useCallback	依存関係が変わるまで、関数の参照をキャッシュする。	メモ化された子に渡す、またはdepsとして使う安定したコールバック。
⤢React.memo	propsが変わらないコンポーネントの再レンダーをスキップする。	重い子コンポーネント。浅い比較で足りない場合は第2引数に比較関数を渡す(HOCであり、フックではない)。
Contextと外部ハンドル
⤢useContext	prop drillingなしでcontextの値を読み取る。	ツリー全体で共有されるテーマ、ロケール、認証ユーザーなど。
⤢useImperativeHandle	ref越しに親が見るインスタンスをカスタマイズする。	forwardRef経由で子から絞り込んだAPIを公開する。
並行処理とその他
⤢useTransition	state更新を緊急でないものとしてマークし、UIの応答性を保つ。	重いリストが再レンダーする間も入力を軽快に保つ。
⤢useDeferredValue	値を遅延させ、更新を中断可能にする。	タイマーなしで高コストなレンダーをデバウンスする。
⤢useId	アクセシビリティ属性用の安定した一意なidを生成する。	サーバーとクライアントのレンダーをまたいでlabelとinputを結び付ける。
⤢use()	レンダー中にpromiseやcontextを読み取る。条件付きで呼べる唯一のフック。	Suspenseとともにpromiseをアンラップする、または早期returnの中でcontextを読む。
⤢useActionState	フォームアクションで駆動されるstateを保持する。pendingフラグ付き。	エラーや更新されたstateを返し、インラインで表示するフォーム送信。
⤢useOptimistic	楽観的な値を即座にレンダーし、アクションが完了すると実際のstateへ戻る。	サーバーリクエストの通信中に、いいねや送信済みメッセージを表示する。
⤢useFormStatus	囲んでいる<form>のpending状態を、propsなしで読み取る。	親フォームの送信中に自分自身を無効化する送信ボタン。
⤢useSyncExternalStore	Reactの外のストアに登録し、一貫したスナップショットを1つ読み取る。	オンライン状態のようなブラウザAPI、またはサードパーティのstateストア。
⤢useInsertionEffect	layout effectの前に実行される。CSS-in-JSのルール注入のために作られた。	レイアウトが読まれる前にルールを挿入する必要があるスタイルライブラリ。
⤢useDebugValue	React DevToolsでフックの内部stateにカスタムラベルを表示する。	デバッグ中に、カスタムフックが保持するものにラベルを付ける。
⤢Custom hooks (use*)	組み込みフックを組み合わせてロジックを共有する、自作のフック。	useFetchやuseMediaQueryのような再利用可能なステートフルな振る舞い。