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

このReactクイズは、Reactコンポーネントの動作に関する問題です。以下に問題の解説を示します。

このコードでは、Reactコンポーネント App が定義されています。App コンポーネント内では、useState フックを使用して state 変数を初期化し、setState 関数を定義しています。

App コンポーネント内には、コンソールに出力するためのログステートメントが含まれています。 console.log(1) は常に表示されますが、 console.log(2) は state の変更によってのみトリガされます。

さらに、 Promise.resolve().then(() => console.log(3)) ステートメントと setTimeout(() => console.log(4), 0) ステートメントがあります。これらのステートメントは、非同期的な処理をシミュレートし、それぞれコンソールにログを出力します。

最後に、button 要素をレンダリングし、クリックイベントが発生したときに onClick 関数が呼び出されます。onClick 関数内では、 setState を使用して state を更新し、新しい値に基づいてコンソールにログを出力します。

ReactDOM.createRoot メソッドを使用して、 App コンポーネントのレンダリングを行っています。最後の行では、 setTimeout 関数を使用して click me ボタンをクリックするようにシミュレートしています。

このスクリプトを実行すると、どのような出力がコンソールに表示されるでしょうか？