確認環境
react 18.2.0
react-dom 18.2.0
react-scripts 4.0.0StrictMode をオフにして検証します。
useEffect の挙動
flag 変数の依存を指定する場合
src/App.js
import { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
const [flag, setFlag] = useState(false)
useEffect(()=>{
console.log('init in useEffect()')
if (flag) {
console.log('inner if block')
}
},[flag])
return (
<div className="App">
<button onClick={()=>{setFlag(!flag)}}>Button</button>
</div>
);
}コンソールログ (初期ロード時)
init in useEffect()コンソールログ (ボタンを押下時)
※ 2 は init in useEffect() が実行された回数です。
2 init in useEffect()
inner if block変数の依存を空にする場合
src/App.js
import { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
const [flag, setFlag] = useState(false)
useEffect(()=>{
console.log('init in useEffect()')
if (flag) {
console.log('inner if block')
}
},[])
return (
<div className="App">
<button onClick={()=>{setFlag(!flag)}}>Button</button>
</div>
);
}コンソールログ (初期ロード時)
init in useEffect()コンソールログ (ボタンを押下時)
init in useEffect()=> 変化なし。