インターフェース説明
useEffectはReactのHook関数であり、Reactコンポーネント内でイベントによるものではなく、レンダリングそのものによって引き起こされる操作(副作用)を作成するために使用されます。たとえば、AJAXリクエストの送信やDOMの変更などが含まれます。
ページのレンダリング後、またはページ内のコンポーネントに変化があった際に実行される操作として理解できます。
第1引数は関数で、副作用関数と呼ぶことができます。この関数内に実行したい操作を記述します。
第2引数は配列(省略可能)で、この配列に依存項を指定します。異なる依存項が第1引数の関数の実行に影響を与えます。配列が空の場合、副作用関数はコンポーネントのレンダリング後に一度だけ実行されます。
使用方法
依存項
- useEffectの副作用関数が実行されるタイミングは、指定された依存項によって異なります。
- 依存項 副作用関数の実行タイミング
- 依存項なし コンポーネント初期レンダリング+更新時
- 空の配列 初期レンダリング時に1回のみ実行
- 特定の依存項あり 初期レンダリング+依存項が変化した時