ReactHooks
React Hooksとは
React Hooksはv16.8から追加された新機能。
Reactではクラスコンポーネントと関数コンポーネントの２種類がありましたが、v16.8以前では関数コンポーネントでは状態(state)を持つことができなかったため、クラスコンポーネントが主流でした。
v16.8からHooksの追加され、関数コンポーネントに状態を持たせることが可能になり、UIを切り替えたり、外部APIからデータを取得することができるようになりました。
現在は、Hooksを使った関数コンポーネントが主流。
React Hooksの種類
| 分類 | フック名 | 効果 | 対象 | 使用目的 |
|---|---|---|---|---|
| Basic Hooks | useState | コンポーネントの状態を管理する | すべてのコンポーネント | コンポーネント内で状態を保持し、その状態の変更や取得が可能になる |
| useEffect | コンポーネントの副作用を処理する | すべてのコンポーネント | コンポーネントがマウントされたり更新されたりした際に副作用（API呼び出し、イベントリスナーの登録など）を実行する | |
| useContext | コンテキストを利用する | すべてのコンポーネント | コンテキストを利用してコンポーネントツリー内で値を共有する | |
| Additional Hooks | useReducer | 複雑な状態やアクションに基づく状態の更新を処理する | すべてのコンポーネント | 状態の更新に基づくアクションを処理し、新しい状態を返す |
| useCallback | コールバック関数をメモ化して再レンダリングの最適化を行う | すべてのコンポーネント | コールバック関数の再生成を防止し、パフォーマンスを向上させる | |
| useMemo | 値をメモ化して再レンダリングの最適化を行う | すべてのコンポーネント | 計算結果をキャッシュして再レンダリングの最適化を行う | |
| useRef | 参照を作成する | すべてのコンポーネント | コンポーネントのレンダリング間で値を保持する | |
| useImperativeHandle | リフォワードリファレンスをカスタムする | 特定のコンポーネント | 子コンポーネントのインスタンスを親コンポーネントで直接操作できるようにする | |
| useLayoutEffect | ブラウザの描画後に副作用を処理する | すべてのコンポーネント | useEffectと似ているが、ブラウザの描画後に副作用を処理するため、描画の前にDOMを直接操作する場合に適している | |
| useDebugValue | カスタムフックにラベルを付けてデバッグを補助する | カスタムフック | カスタムフックの値をデバッグするために使用する | |
| useDeferredValue | 遅延評価された値を扱う | すべてのコンポーネント | 遅延評価された値（非同期の値など）を取り扱うために使用する | |
| useTransition | 遅延ローディングやアニメーションを処理する | すべてのコンポーネント | コンポーネントの表示を遅延させたり、アニメーションを制御するために使用する | |
| useId | ユニークなIDを生成する | すべてのコンポーネント | ユニークなIDを生成し、要素の一意性を確保する | |
| Library Hooks | useSyncExternalStore | 外部ストア（状態管理ライブラリなど）と同期する | すべてのコンポーネント | 外部の状態管理ライブラリ（Reduxなど）とReactコンポーネントを同期させる |
| useInsertionEffect | DOMへの要素の挿入や削除を監視し、副作用を処理する | すべてのコンポーネント | 要素がDOMに挿入または削除されたときに副作用を実行する |