useEffectを使ってみる (React)

October 29, 2022

確認環境

react 18.2.0
react-dom 18.2.0
react-scripts 4.0.0

StrictMode をオフにして検証します。

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()

=> 変化なし。


SHARE

Profile picture

Written by tamesuu