BFE.devでのAI解答例 - React クイズ
27. useEffect() timing II

このReactクイズでは、以下の出力がどのようになるかを考える必要があります。

1
2
3
4

まず、コンポーネントのレンダリングが始まります。最初のuseState(0)によって、stateが0に設定されます。そして、console.log(1)が実行されて、コンソールに1が出力されます。

次に、useEffectフックが実行されます。[state]がディペンデンシーとなっているため、これは初回レンダリング時とstateの値が変わった時に実行されます。初回レンダリング時にconsole.log(2)が実行されて、コンソールに2が出力されます。

次に、Promise.resolve().then(() => console.log(3))が非同期に実行されます。このPromiseは、次のマイクロタスクキューに追加されますが、現在のスレッドが完了するまで待ちません。そのため、console.log(3)が実行されて、コンソールに3が出力されます。

最後に、setTimeout(() => console.log(4), 0)が非同期に実行されます。コールバック関数はタイマーによって0ms後に実行されますが、実際には少し遅れます。そのため、console.log(4)は最後に実行されて、コンソールに4が出力されます。

以上の結果から、出力は1 2 3 4となります。