![株式会社デジナーレ[designare]](https://designare.jp/wp-content/themes/designare_new/img/logo.svg){kind=logo}
Writer： tokuyasu 更新日：2023/10/31
こんにちは、デジナーレ福岡オフィスの徳安です。
この記事では、useEffect()について説明します。
useEffect()
useEffect()は、コンポーネントを
外部システムと同期させるためのReactフック
・・・＊外部システム（副作用）・・・
React の state に基づいて非React 製コンポーネントを制御したり、
サーバとの接続を確立したり、
コンポーネントが画面に表示されたときに
分析用のログを送信したりするもの。
Reactではレンダーによって引き起こされる副作用のことを指す。
■useEffect(setup, dependencies?)
|
1 2 3 4 5 6 7 8 9 10 |
//【例】 import { useEffect } from 'react'; const sample = () => { // 関数を宣言 const setup = () => console.log("関数が実行されました"); // 第ー引数に実行したい関数、第二引数に依存配列を設定する useEffect(() => setup, [dependencies]); }; |
useEffect()はコンポーネントの
トップレベルでuseEffectを呼び出して、Effectを宣言する。
＊マウント コンポーネントに対応するDOMノードを作成し、
既存のDOMツリーに挿入して最終的なUIに出力するプロセスのこと。
＊アンマウント DOMノードが既存のDOMツリーから削除されること。
＊更新 既存のDOMツリーに存在するDOMノードに変更を加えること。
setup(第一引数):
＊初めてDOMに追加された時
Reactはセットアップ関数を実行する。（マウント時）
（初回レンダー時は、すべての副作用はクリーンアップされている前提で、
セットアップ関数のみ行う。）
＊dependencies(依存配列)が変更された再レンダー時
Reactは古い値を使ってクリーンアップ関数を実行
→その後新しい値を使用し、セットアップ関数を実行する。（更新時）
（更新時は、セットアップ関数を実行するので、
先にクリーンアップを実行する。）
＊コンポーネントがDOMから削除された時
Reactはクリーンアップ関数を最後にもう一度実行する。（アンマウント時）
（削除時は、次回コンポーネントが呼ばれて、
レンダリングされる際に、セットアップできるようにクリーンアップする。）
-- ＊第二引数を省略した場合 --
コンポーネントがレンダリングされるたびに、
Reactは古い値を使ってクリーンアップ関数を実行、
その後新しい値を使用し、セットアップ関数を実行する。
|
1 2 3 4 5 6 7 8 9 10 |
//【例】 import { useEffect } from 'react'; const sample = () => { // 関数を宣言 const setup = () => console.log("関数が実行されました"); // <span>毎回のレンダー後に実行される</span> useEffect(() => setup ); }; |
-- ＊空の依存配列を渡した場合 --
セットアップ関数を
初回レンダリング時の一度だけ実行する。
|
1 2 3 4 5 6 7 8 9 10 |
//【例】 import { useEffect } from 'react'; const sample = () => { // 関数を宣言 const setup = () => console.log("関数が実行されました"); // <span>マウント時（コンポーネント出現時）のみ実行される</span> useEffect(() => setup, []); }; |
-- ＊依存配列を渡した場合 --
依存配列を設定すると、
エフェクトは最初のレンダー後及び
依存配列が変わった後のレンダー後に実行される。
Reactは古い値を使ってクリーンアップ関数を実行
→その後新しい値を使用し、セットアップ関数を実行する。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//【例】 import { useEffect, useState } from 'react'; const sample = () => { const [dependencies, setDependencies] =useState() // 関数を宣言 const setup = () => console.log("関数が実行されました"); //<span>マウント時と、dependenciesの値が前回のレンダーより変わった場合に実行される</span> useEffect(() => setup, [dependencies]); }; |
クリーンアップ関数
useEffect()のセットアップ関数から
返された関数をクリーンアップ関数と呼ぶ。
セットアップを実行する前には、
必ずクリーンアップされている必要がある。
（初期状態である必要がある）
|
1 2 3 4 5 6 7 8 9 10 |
useEffect(() => { //1秒後にコンソールに出力する処理 setTimeout(() =>{ console.log("関数が実行されました") }, 1000) return () => { clearTimeout(); }; }, []); |
クリーンアップとは、エフェクトを停止させる、
もしくはもとに戻す処理のことを指す。
ライフサイクル
useEffect()は、
周囲のコンポーネントとは異なるライフサイクルを持つ。
コンポーネントは
マウント、更新、アンマウントを行うことができる。
しかしエフェクトは
同期の開始と同期の停止の2つのことしかできない。
エフェクトが、propsやstateに依存し、
これらが時間とともに変化する場合
このサイクルは繰り返し発生する。
ここまで読み進めていただきありがとうございます。
