More than 1 year has passed since last update.

useEffectを画面表示時（マウント時）のみ発火させる方法

Posted at 2023-01-19

まぁ何番煎じだよって気もしますが復習用

useEffectの第二引数に空配列を指定することで画面表示時に発火するようになります。

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

useStateの値を指定した場合はstateが更新されたとき（setTest()呼ばれたとき）に発火するようになります。

const [test, setTest] = useState('');

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

useStateの第一引数にはstateが更新されたときの関数を渡しますが、非同期関数は渡せません、内部で非同期関数を呼ぶようにしましょう。
NG

useEffect(async () => {
    console.log(test);
  }, [test]);

useEffect(() => {
    async function test() {
      console.log(test);
    }
  }, [test]);