useEffectの挙動について

Question

以下のコードについて質問です。

useEffectはブラウザの描写後に処理を行うと認識しています。
予想では描写が完了後にアラートが出ると考えていたのですが、描写前にアラートが出ます。
この挙動は何故なのでしょうか。

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

function Checkbox() {
  const [checked, setChecked] = useState(false);

  useEffect(() => {
    alert(`checked: ${checked.toString()}`);
  });

  return (
    <>
      <input
        type="checkbox"
        value={checked}
        onChange={() => setChecked(checked => !checked)}
      />
      {console.log("write")}
      {checked ? "checked" : "not checked"}
    </>
  );
}

export default function App() {
  return <Checkbox />;
}

Answer 1

予想では描写が完了後にアラートが出ると考えていたのですが、描写前にアラートが出ます。

2つの可能性があります。

• ブラウザがalert処理をする際の都合によるもの
• useEffectが描画の開始移行のタイミングで実行するものの、描画完了は待たない（描画完了を待つuseLayoutEffectというものもあります）

Comments

[_beg]

useLayoutEffectも試したのですが、alert->画面描写完了の動きをしているように見えます。