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>;
}