最終更新:2022-12-16 (金) 10:22:38 (280d)
useEffect
Top / useEffect
副作用 (effect) フック
関数コンポーネント内で副作用を実行することができるようになる
https://ja.reactjs.org/docs/hooks-effect.html
構文
useEffect(実行する関数, [依存する値]);
概要
- DOMへの更新(レンダリング)を反映した後にあなたが定義する「副作用関数」を実行するように React に指示
- ある値が変わっときに処理を実行する機能
- 関数の実行タイミングをReactのレンダリング後まで遅らせるhook
副作用の例
- データの取得
- 購読 (subscription) の設定
- React コンポーネント内のDOMの手動での変更
メモ
- 典型的には、副作用は React が DOM を更新したあとに起こすようにしたい
副作用の種類
クリーンアップを必要としない副作用
- React が DOM を更新した後で追加のコードを実行したい
- 例
- ネットワークリクエストの送信
- 手動での DOM 改変
- ログの記録
クリーンアップを有する副作用
- returnにクリーンアップ関数を書く
注意点
- 依存する値が変わったときに加え、マウント時にも必ず実行される。
- []を指定するとコンポーネントの初回表示時に実行するようにできる
