React useEffect で無限ループを避ける方法

無限ループする例

useEffect 内で state を更新しているため、無限ループになる。

App.js

import { useEffect, useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const [boolean, setBoolean] = useState(false);

  useEffect(() => {
    setBoolean(true);
    setCount(count + 1);
  });

  return (
    <div>
      <p>Boolean is {boolean.toString()}.</p>
      <p>Count is {count}.</p>
    </div>
  );
}

無限ループを避ける方法

useState の第二引数に、値が変化したときにレンダリングしてほしい state の配列を指定する。

これはよくある要求なので、useEffect フックの API にはこの動作が組み込まれています。再レンダー間で特定の値が変わっていない場合には副作用の適用をスキップするよう、React に伝えることができるのです。そのためには、useEffect のオプションの第 2 引数として配列を渡してください。

App.js

import { useEffect, useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const [boolean, setBoolean] = useState(false);

  useEffect(() => {
    console.log(boolean);
    setBoolean(true);
    setCount(count + 1);
  }, [boolean]);

  return (
    <div>
      <p>Boolean is {boolean.toString()}.</p>
      <p>Count is {count}.</p>
    </div>
  );
}

参考記事