概要
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
コメント