【React】ざっくり解説useEffectの基礎

useEffectとは？
useEffect発動タイミングまとめ
useEffect注意点

useEffectとは？

useEffectとは、コンポーネントの画面生成後または、更新後に自動実行する関数処理を設定するHooksです。

useEffectの構文は以下のように2つの引数を受け取ります。なお、2つ目の引数はオプションです。

useEffect( コールバック関数, [ 監視する値(依存関係の値)の配列 ] );

基本的には、設定した第1引数の関数処理が、コンポーネントが画面に描写された後や更新されたら実行されます。

useEffect の発動タイミングは、useEffect を設定したコンポーネントの「最初の画面レンダリング後」か

「state・props 変更等による再レンダリング後」の2パターンになります。

ポイントは、第1引数に設定したコールバック関数の実行タイミングを第2引数によって制御できる点です。

useEffect発動タイミングまとめ

useEffectの発火タイミングを簡単にまとめると、次のようになります。

①第2引数なし: Component の生成後や state・props の変更の度にコールバック関数が発動
②第2引数が空配列: Component の生成後に1度だけコールバック関数が発動する
③第2引数あり: 監視対象の変更の度にコールバック関数が発動する

初回のレンダリング後にだけコールバック関数を実行するようにしたり、監視する対象を設定して、その値の変更があった時だけコールバック関数を実行するなど・・・

コールバック関数の実行タイミングを調整できる点が、useEffectのポイントです。

①第2引数なし: Component の生成後や state・props の変更の度にコールバック関数が発動

// 1. 第2引数なし: Component の生成後や state 変更の度に設定した関数実行
useEffect(() => {
    console.log('Component の生成後や state 変更の度に呼び出される useEffect()');
});

②第2引数が空配列: Component の生成後に1度だけコールバック関数が発動する

第2引数を[](空配列) にすることで、コンポーネントの更新によるuseEffectの停止をすることができます。

// 2. 第2引数が空配列: Component の生成後に1度だけ設定した関数実行
useEffect(() => {
    console.log('Component の生成後に1度だけ呼び出される useEffect()');
}, []);

③第2引数あり: 監視対象の変更の度にコールバック関数が発動する

const [count, setCount] = useState(0);
const [count2, setCount2] = useState(0);

// 1. 第2引数の count の変更を監視している
useEffect(()=>{
    console.log('count を監視している useEffect() が実行されました');
},[count]);

// 2. 第2引数の count2 の変更を監視している
useEffect(()=>{
    console.log('count2 を監視している useEffect() が実行されました');
},[count2]);