useEffect内でuseStateのsetを使う場合

Question

下のコードでカウントアップに失敗する理由がわかりません。

レンダリングされる→useEffectが実行される→setCountが実行される→再レンダリング時にcountが更新される→・・・という流れの中でどこで問題が発生しているのでしょうか？

また、setCount(count+1)をsetCount(prevCount => prevCount+1)とすると機能する理由についても知りたいです。

初歩的な質問ですが、ご教授頂けるとありがたいです。

参考記事

const Counter = () => {
    const [ count, setCount ] = useState(0);

    useEffect(() => {
        const time = setInterval(() => {
            setCount(count + 1);
        }, 1000);

        return () => clearInterval(time);
    },[]);

    return (
        <div>
            <p>{count}</p>
        </div>
    );
};

Answer 1

useEffectの依存配列が[]なので、指定された関数は最初のときのものが保存されます。

結果、参照するcountも最初の時のままになり、setCountをいくら行ってもuseEffect内のcountは0から変わらず、setCount(1);が繰り返されるだけになります。

このような場合、setCount(oldCount => oldCount + 1);のように、setCountへ「今の値から次の値を生成する関数」を渡すのが適切です。

Comments

[maskmelon]

依存配列の中身を指定しないと関数の中身も固定されてしまうんですね。
わかりやすい解説をくださりありがとうございました。