【React】useEffectの使い方・どんな時に使うのか？発火タイミングやメリットについて解説

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、ReactのHooksである useEffectの使い方や、発火タイミング・メリットについて解説していきます。

1 useEffectとは？
2 useEffectの構文・使い方は？
3 useEffectの発火タイミングは？
4 useEffectの使い方と注意点・まとめ
5 useEffect に対するよくある Q & A
6 Twitterやってます！Follow Me！
7 React関連の書籍
8 プログラミング学習・エンジニア転職関連の情報
9 参考・引用
10 最近の投稿

useEffectとは？

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

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

このコンポーネントの画面生成(画面レンダリング)や更新が、useEffectを理解するためのポイントです。

Reactでは、コンポーネントが画面の構成パーツとしてレンダリングされます。

また、stateやpropsの変更は検知されて、その変更は即時反映されます。

そういったコンポーネントのレンダリング(画面生成)や部分的な再レンダリング(再生成)でuseEffectは動きます。

useEffectの構文・使い方は？

useEffectの構文は、次のとおりです。

useEffect の構文

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

第1引数にコールバック関数、第2引数は任意で配列を設定できます。

第2引数の配列内の値によって、useEffectの第1引数に渡したコールバック関数の実行タイミングが変化します。

この実行タイミングの変化が、useEffectのポイントです。

次の useEffect の SampleCodeでは、4パターンの useEffect を使っています。

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

useEffect の発火タイミングについては、別途、解説します。

import { useState, useEffect } from 'react';

const containerStyle = {
    textAlign: "center",
  };
  
  const buttonStyle = {
    margin: "20px"
  };

export const UseEffectSample = ()=>{


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

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

    // 2. 第2引数・空配列: Component の生成後に1度だけ呼び出される
    useEffect(() => {
        console.log('Component の生成後に1度だけ呼び出される useEffect()');
    }, []);
  
    // 3. 第2引数の count の変更を監視している
    useEffect(()=>{
      console.log('Robotama を監視している useEffect() が実行されました');
    },[count]);

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

    useEffect(()=>{
        console.log('--------------------- 1回分のレンダリング完了 --------------------------');
    });

    return (
      <div style={containerStyle}>
        <h1>useEffect-Sample</h1>
        <h2>Robotama-Counter: { count }</h2>
        <h2>Gunmar-Counter: { count2 }</h2>
        <button onClick={() => setCount(count + 1)} style={buttonStyle}>Robotama +</button>
        <button onClick={() => setCount2(count2 + 1)} style={buttonStyle}>Gunmar +</button>
      </div>
    );
  
};

最初の画面レンダリング後

最初の画面レンダリング後は、コンポーネント内のすべての useEffect のコールバック関数が実行されているのがわかります。

このように、useEffectでは、コンポーネントが画面にマウントされた後(画面にレンダリング後)に必ずコールバック関数が実行されます。

監視しているstateの変更による再レンダリング後 Ver. count

「 Robotama + 」ボタンをClickすると、count という stateが更新されます。

すると、countを監視している useEffect とコンポーネントが生成・更新されたら起動する useEffect の2つのコールバック関数が実行されます。

監視しているstateの変更による再レンダリング後 Ver. count2

「 Gunmar + 」ボタンをClickすると、count2 という stateが更新されます。

すると、count2を監視している useEffect とコンポーネントが生成・更新されたら起動する useEffect の2つのコールバック関数が実行されます。

useEffectの発火タイミングは？

ここまでの解説で useEffectの使い方や実行タイミングは、わかってきたと思いますが、ここでまとめておきます。

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

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

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

useEffectの発火タイミングまとめ

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

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

注意してほしいのは、Componentが画面にマウントされた後(画面にレンダリング後)に必ずコールバック関数が実行されるという点です。

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

コールバック関数の実行タイミングを調整できる点が、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引数あり: 監視stateの変更の度にコールバック関数が発火する

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]);