useEffect内でstateを更新する際の挙動について

Question

次のコードでわからない部分があります。 awaitでtimeoutの処理を待っているのにもかかわらず、
なぜか、ログの結果が1, 3, 2, 4になります。また、この記述だとup関数内でsetCount関数が2回呼び出しています。
また、通常の関数の中でsetCountを2回呼び出した場合レンダリングの回数が初期レンダリングと合わせて2回でした。このコードだとレンダリングが合計3回発生します。
解説の程をよろしくお

const timeout = async (ms: number) =>
  new Promise<void>((resolve) => {
    setTimeout(() => resolve(), ms);
  });

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

  useEffect(() => {
    const up = async () => {
      setCount(1);
      console.log("3");
      await timeout(3000);
      console.log("4");
      setCount(2);
      return;
    };
    console.log("1");

    up();
    console.log("2");
  }, []);

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

Answer 1

awaitでtimeoutの処理を待っているのにもかかわらず、

useEffect直下の関数はasyncではありませんので、upがasyncだろうが無関係に進んでいって、console.log("4");は後から実行されます。

このコードだとレンダリングが合計3回発生します。

そもそも論を言えば、レンダリングの回数を気にしても仕方ないのですが、useEffectがasync-awaitと無縁に進んでいくので、1回目と2回目のsetCountは別に実行されます。