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に挿入または削除されたときに副作用を実行する

参考

• フック API リファレンス
• Built-in React Hooks