Kyle Chen's Blog

Action speaks louder than Words

0%

ReactのuseEffectについて

インターフェース説明

  • useEffectはReactのHook関数であり、Reactコンポーネント内でイベントによるものではなく、レンダリングそのものによって引き起こされる操作(副作用)を作成するために使用されます。たとえば、AJAXリクエストの送信やDOMの変更などが含まれます。

  • ページのレンダリング後、またはページ内のコンポーネントに変化があった際に実行される操作として理解できます。

  • 第1引数は関数で、副作用関数と呼ぶことができます。この関数内に実行したい操作を記述します。

  • 第2引数は配列(省略可能)で、この配列に依存項を指定します。異なる依存項が第1引数の関数の実行に影響を与えます。配列が空の場合、副作用関数はコンポーネントのレンダリング後に一度だけ実行されます。

使用方法

image.png

image.png

image.png

image.png

依存項

  • useEffectの副作用関数が実行されるタイミングは、指定された依存項によって異なります。
  • 依存項 副作用関数の実行タイミング
  • 依存項なし コンポーネント初期レンダリング+更新時
  • 空の配列 初期レンダリング時に1回のみ実行
  • 特定の依存項あり 初期レンダリング+依存項が変化した時