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

このコードの実行結果は以下の通りです。

1 5 2 3 4

まず、コンポーネントのrenderメソッドが呼び出され、stateの初期値0がuseStateフックを使用して設定されます。 その後、useLayoutEffectフックが呼び出され、ログに5が出力されます。同時に、setStateを使用してstateの値が1増えます。

その後、useEffectフックが呼び出され、stateの変更を監視しているため、stateの値が変更された場合にログに2が出力されますが、この時点ではstateの値は変更されていないため、出力されません。

次に、Promise.resolve().then()を使用して非同期処理が行われます。この非同期処理は、現在のイベントループの終了後に実行されます。非同期処理の中では、ログに3が出力されます。

最後に、setTimeout関数が使用され、タイマーが0ms後にログに4を出力するように設定されます。setTimeout関数は非同期的なタイマーを作成するため、この段階ではまだログに4は出力されません。

以上がコードの実行結果です。