この記事の最終更新日: 2023年3月20日
Reactフックは、関数コンポーネント内でステートやライフサイクルメソッドを使えるようにする機能です。フックを使うことで、クラスコンポーネントを使わずに関数コンポーネントでよりシンプルなコードを書くことができます。この記事では、主要なReactフックの概要とタイミングについて解説します。
useState
useStateフックは、関数コンポーネントでローカルステートを使用できるようにします。useStateは、ステートの初期値を引数として受け取り、現在のステート値とその値を更新する関数を返します。
タイミング
- コンポーネントがレンダリングされる際に実行されます。
- ステートが更新されると、コンポーネントが再レンダリングされます。
useEffect
useEffectフックは、副作用を扱うために使用されます。これには、データの取得や購読、DOMの操作、タイマーなどが含まれます。useEffectは、関数（副作用を実行する関数）と依存配列（副作用が依存する変数の配列）を引数に取ります。
タイミング
- コンポーネントがマウントされた後に実行されます。
- 依存配列の要素が変更されたときに再実行されます。
- コンポーネントがアンマウントされるときに、クリーンアップ関数が実行されます。
useContext
useContextフックは、コンテキストを利用するために使用されます。useContextは、コンテキストオブジェクトを引数に取り、現在のコンテキスト値を返します。
タイミング
- コンポーネントがレンダリングされる際に実行されます。
- コンテキスト値が変更されたときに、コンポーネントが再レンダリングされます。
useReducer
useReducerフックは、複雑なステートロジックを管理するために使用されます。useReducerは、リデューサ関数とステートの初期値を引数に取り、現在のステート値とその値を更新するディスパッチ関数を返します。
タイミング
- コンポーネントがレンダリングされる際に実行されます。
- アクションがディスパッチされると、リデューサ関数が実行され、ステートが更新されます。
- ステートが更新されると、コンポーネントが再レンダリングされます。
useCallback
useCallbackフックは、関数のメモ化を行い、不要な再レンダリングを防ぐために使用されます。useCallbackは、関数（メモ化する関数）と依存配列（関数が依存する変数の配列）を引数に取り、メモ化された関数を返します。
タイミング
- コンポーネントがレンダリングされる際に実行されます。
- 依存配列の要素が変更されたときに、関数が再メモ化されます。
useMemo
useMemoフックは、値のメモ化を行い、不要な再計算を防ぐために使用されます。useMemoは、関数（メモ化する値を計算する関数）と依存配列（値が依存する変数の配列）を引数に取り、メモ化された値を返します。
タイミング
- コンポーネントがレンダリングされる際に実行されます。
- 依存配列の要素が変更されたときに、値が再メモ化されます。
useRef
useRefフックは、ミュータブルな参照オブジェクトを作成するために使用されます。useRefは、参照オブジェクトの初期値を引数に取り、参照オブジェクトを返します。このフックは、DOM要素への参照や、レンダリング間で値を保持するために使用されます。
タイミング
- コンポーネントがレンダリングされる際に実行されます。
- 参照オブジェクトの値が変更されても、コンポーネントは再レンダリングされません。
まとめ
この記事では、Reactフックの概要とタイミングについて紹介しました。これらのフックを理解し活用することで、関数コンポーネントで効率的なコードを書くことができます。
大阪のエンジニアが書いているブログ。
コメント