Hookは関数コンポーネントでState、Ref、Effect、ContextなどのReact機能を使えるようにする。名前より先に、「いつ再レンダーが必要か」「何と同期するか」「値や関数をなぜ保持するか」を区別する。
HOOKS · 2026Hookはuseで始まる名前を持ち、関数コンポーネントでStateなどのReact機能を利用できるようにする。組み込みHookを組み合わせ、繰り返される状態ロジックを別の関数に取り出せばカスタムHookになる。カスタムHookはロジックを共有するが、Stateそのものを複数のコンポーネントで自動共有するわけではない。
Hookはコンポーネントか別のHookの最上位でのみ呼び出す。条件分岐、ループ、入れ子の関数の中で呼んではならない。Reactが呼び出し順で各Hookの状態を対応付けるためだ。通常のJavaScript関数からHookを呼び出さない。
STATE VS REF · 2026useStateは値が画面に影響するときに使う。setterで更新するとReactが次のレンダーを予約する。前のStateから次の値を計算する場合は、setCount(count => count + 1)のようなupdater関数を使うと、古い値に依存するミスを減らせる。
useRefはレンダーをまたいで値を保持するが、ref.currentを変えても再レンダーを起こさない。DOMノードを参照したり、タイマーIDや以前の値など、画面の計算に直接必要ない情報を保存したりするときに向いている。画面に表示する値をRefに置くと、値が変わっても画面は追従しない。
EFFECTS · 2026useEffectは、ネットワーク接続、ブラウザAPI、タイマー、サードパーティーのウィジェットなど、Reactの外のシステムとコンポーネントを同期するHookだ。単に「レンダー後にコードを実行する場所」と覚えると、Stateから計算できる値までEffectに移し、不要な再レンダーや繰り返し実行を招きやすい。
setup関数は必要に応じてcleanup関数を返す。cleanupは再同期の前やコンポーネントが消えるときに、接続・購読・タイマーを片付ける。依存配列にはEffectが読むリアクティブな値を漏れなく書く。配列を空にして実行回数を無理に合わせるより、Effectが何と同期するのかを見直す。
REDUCER · 2026useReducerは、状態更新の規則が多い場合や複数のフィールドが一緒に変わる場合に、その規則をreducer関数に集める。コンポーネントはdispatchで「何が起きたか」を示すactionを送り、reducerは現在のstateとactionを受けて次のstateを計算する。
reducerは純粋でなければならず、既存のStateを直接変更しない。useStateより常に優れているわけではない。単純な値が数個ならuseStateのほうが読みやすい。状態遷移の種類が増え、更新ロジックが各イベントハンドラに散らばるとuseReducerの利点が大きくなる。
CONTEXT · 2026Contextは、テーマ、言語、ログイン情報など多くの子孫コンポーネントが読む値を、中間の各コンポーネントにPropsで渡さず、ツリーの下へ供給する通路だ。Providerが値を提供し、useContextは最も近い上位Providerの値を読み、購読する。
ContextはすべてのStateをグローバル化する万能の保存場所ではない。値が変わるとそれを読むコンポーネントが再レンダーされるため、頻繁に変わる巨大なオブジェクトを不用意に入れると影響が広がる。まずPropsやStateの配置変更で解決できるか確認し、離れた複数の利用箇所が本当に同じ値を必要とするときに使う。
MEMOIZATION · 2026useCallbackは依存値が変わらない間、同じ関数定義を返す。memoで包んだ子にコールバックをPropsとして渡す場合や、別のHookの依存値として関数の同一性が重要な場合に使える。関数を実行したり結果を保存したりするHookではない。
useMemoは計算結果を、useCallbackは関数そのものを保持する。memoはPropsが同じときにコンポーネントの再レンダーを省く最適化だ。三つとも正しさのために必須の構文ではなく、測定した性能問題を減らす道具である。すべての関数にuseCallbackを付けると、依存値の管理とコードの複雑さだけが増えることもある。