[react] useEffectが実行されるタイミング

管理者

2年前

概要
サンプル
1. 実行結果

概要

reactのuseEffectフックは第2引数によって実行されるタイミングが異なる。

第2引数なし
レンダリングされる度に実行される
クラスコンポーネントのcomponentDidUpdateメソッドと同等
第2引数が空配列
マウント時のみ実行される
クラスコンポーネントのcomponentDidMountメソッドと同等
第2引数が変数を要素に持った配列
マウント時および変数が更新された際に実行される

サンプル

import { useState, useEffect } from 'react';

function App() {
  const [ num, setNum ] = useState(0);
  const [ num2, setNum2 ] = useState(0);

  useEffect(()=>{
    console.log('mounted, updated');
  });

  useEffect(()=>{
    console.log('mounted');
  },[]);

  useEffect(()=>{
    console.log('variable changed');
  }, [num]);

  return (
    <>
      <button onClick={()=>{setNum(num+1);}}>num++</button>
      <button onClick={()=>{setNum2(num2+1);}}>num2++</button>
    </>
  );
}

export default App;

実行結果

読み込み時

mounted, updated
mounted
variable changed

num++ボタンクリック時

mounted, updated
variable changed

num2++ボタンクリック時

mounted, updated