useEffectの特徴
- 副作用の実行
- コンポーネントが画面に表示された後に、何かしらの作業をさせたい時に使用する。例えば、Webサイトからデータを取得したり、画面の一部を直接変更したりする場合。
- クリーンアップ
- useEffect内で設定したイベントリスナやタイマーなどを、不要になった時にきちんと片付けるために使用する。
- 依存配列
- コンポーネントの特定の値が変わった時だけuseEffectを実行したい場合に使う。依存配列が空の場合は、最初に画面に表示される時と、画面から消える時にのみ実行される。
useEffectを使用する理由
- 純粋なコンポーネントを保つ
- useEffectを使用することで「副作用」をコンポーネントの外に出すことができる。これによりコンポーネント本体は純粋なままである
- ライフサイクルの制御
- 状態に応じて特定の作業をしたい場合がある。useEffectを使用すればこれらの「ライフサイクルイベント」を簡単に管理して正しいタイミングで副作用を実行することができる
- 自動クリーンアップ
- 外部データを購読している場合や、タイマーを使用している場合は、コンポーネントが画面から消える場合はそれらを停止させる必要がある。useEffect内でクリーンアップ関数を返すことでこれらの後始末を自動的に行える。
- コードの整理
- UIを表示することと、データ取得やイベントリスナの設定などの副作用は関心が異なる。こuseEffectを使用することで、これらの関心ごとを分離することができる。
そもそもReactにおけるエフェクトとは
エフェクトは特定のイベントによってではなく、レンダー自体によって引き起こされる副作用を指定するためのものです。
例えば、チャットの送信メッセージなどはボタンをクリックすることで実行されるためイベントだが、チャットサーバ接続のセットアップは、何かしらのインタラクションに関係なく行われるべきであるためエフェクトである。
そもそもレンダーとは
「レンダー」とは、Reactがコンポーネントを呼び出すことです。
エフェクトの書き方
以下の3ステップで行う。
- エフェクトを宣言する
- エフェクトの依存値の配列を指定する
- 必要に応じてクリーンアップを追加する