[React] useEffectで無限ループしてしまう

useEffectを使うと無限ループしてしまったので、記事として残しておく。

コード

以下のようなコードを使うと無限ループとなる

import React, { useEffect, useState } from 'react';

export default function Study() {
  const [count, setCount] = useState(0);

  // status変更毎にcallback関数を実行
  useEffect(() => {
    setCount(count + 1);
  }, [count]);

  return <div>{count}</div>;
}

原因

useEffectのcallback関数でStateを変更しているにもかかわらず、第二引数にStateを渡していることが原因。
流れは以下の通り。

1. Study()を呼ぶ
2. useEffect()が呼ばれる
3. setCount()でcountを増やす
4. countが変更されたのでuseEffectが呼ばれる
5. 以下3と4の繰り返し

解決法

useEffectの第二引数を空にするとマウント・アンマウント時しか呼ばれなくなる。

import React, { useEffect, useState } from 'react';

export default function Study() {
  const [count, setCount] = useState(0);

  // status変更毎にcallback関数を実行
  useEffect(() => {
    setCount(count + 1);
  }, []);

  return <div>{count}</div>;
}