Reactコンポーネントのレンダリングされるタイミングが変わってしまう原因

Question

以下のTemporaryコンポーネントは、レンダリングされるタイミングでcountの値を出力するものです。

import { useEffect, useState } from "react";

const Temporary: React.FC<{}> = () => {
  const [count, setCount] = useState<number>(0);
  console.log(count);
  useEffect(() => {
    (async () => {
      setCount(1);
      setCount(2);
      await fetch('/');
      setCount(1);
      setCount(2);
    })();
  }, []);
  return <></>;
};

export default Temporary;

Temporaryをレンダリングすると、次の出力が得られます。

0
2
1
2

await fetch('/');の前と後で、Temporaryがレンダリングされるタイミングが異なります。前ではsetCount(1);を実行してもすぐにレンダリングされず、後ではsetCount(1);を実行すると即座にレンダリングされます。これはなぜでしょうか？なぜawaitを実行する前と後でレンダリングされるタイミングが異なるのでしょうか？

Answer 1

たまたま今のReactの実装がそうなっているだけです。この結果に頼った使い方をすべきではありません。

もともと、setStateは非同期なもので、「複数のsetStateを1回のレンダリングで済ませてもいい」ということになっています。最初の0、同期的に実行される最終結果となる、2回の2についてはレンダリングが確実に行われますが、setCount(1)は反映されてもされなくても問題ありません。

Comments

[toshiyan]

回答ありがとうございます。useState実行時に再レンダリングされるタイミングは仕様で明確に定まっていないということですね。理解しました。