【React】useEffectの第二引数の使い方と活用事例と無限ループの注意点

2023年1月2日React

ReactのuseEffectの第二引数の使い方と活用事例と無限ループになってしまう注意点を紹介します。

useEffectの第二引数の役割

useEffectの第二引数は、依存配列と呼ばれます。
useEffectの第二引数に指定した変数が更新されると、useEffectの第一引数の処理内容を記述した関数も再実行されるという仕組みです。

useEffectの第二引数の使い方

stateの更新に伴って再レンダリングしたい場合にuseEffectの第二引数にその値を入れます。

useEffectの第二引数の活用事例

import { useEffect, useState } from "react";

const Sample = () => {
  const [time, setTime] = useState(0);

  useEffect(() => {
    window.setInterval(() => {
      setTime(prev => prev + 1);
    }, 1000);
  }, [])
  useEffect(() => {
    console.log('依存配列により実行');
    document.title = `${time}秒経過`;
  },[time])

  return (
    <h3>
      <time>{time}</time>
      <span>秒経過</span>
    </h3>
    );
};

export default Sample;

上のようにstateのtimeが更新されるたびに実行したい処理内容をuseEffectの関数に記述することで、
代入の依存配列に指定したstateの更新に伴って再実行することができます。

useEffectの第二引数を使うとき無限ループになってしまう注意点

useEffectの第二引数を使うとき、依存配列に指定したstateの更新用関数をそのuseEffectの関数で実行してはいけません。
上のケースだと、第二引数にtimeを依存配列に指定して、第一引数の関数内でsetTimeを実行すると、再レンダリングが無限ループに起こっってしまうためです。