Zenn
Open2

useEffectとは

React
useEffect
うぅたんうぅたん

useEffectとは（ざっくり）

Reactの関数コンポーネント内で【副作用（Side Effects）】を扱うためのフック。

useEffectの中で行われる副作用（Side Effects）は、コンポーネントのレンダリングが完了した後に実行される。
そのため、副作用（Side Effects）がレンダリングプロセスを妨げたり、想定外の動きを引き起こしたりする。
useEffectは、それらを防いだり、コンポーネントのレンダリングライフサイクルと整合性を保ちながら、効率的に管理する（コントロールする）ことができる。

副作用（Side Effects）ってなんやねん

UIレンダリングプロセスに【間接的に】影響を及ぼす機能や操作のこと。

副作用（Side Effects）の使用例

  • データフェッチング：コンポーネントがマウントされた後に外部APIからデータを取得する。
  • リソースのクリーンアップ：イベントリスナーの削除、タイマーのクリアなど、コンポーネントのライフサイクルに応じたリソース管理。メモリリークを防ぐ役割もあり。

間接的にってどういうことやねん

副作用（Side Effects）自体が直接UIを生成することはないが、「最終的に」UIに表示されるデータを変更したり、ユーザーのインタラクション（ユーザーがシステム、アプリケーション、またはデバイスとやり取りするプロセスや行為）に応じて動的な変更を加えたりすることで、UIの状態や見た目に影響を与えること。