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

このコードの実行結果はどうなるでしょうか？

解説：このコードは、ReactのHooksを使っています。Appコンポーネントは、showステートを持ち、それが真の場合にChildコンポーネントを描画します。Childコンポーネントは、useIsMountedカスタムフックを使って、現在のコンポーネントがマウントされているかどうかを返します。このカスタムフックは、useRefとuseEffectを使用して実装されています。

Childコンポーネントは、マウントされると、useEffectフックを使って、isMounted変数をコンソールに表示します。その後、Promiseを使って一定の時間を経過させたあと、再びisMountedをコンソールに表示します。最後に、unmount()関数を呼び出して、親コンポーネントから自分自身をアンマウントします。

このコードを実行すると、最初のconsole.log(isMounted)がtrueを表示し、2番目のconsole.log(isMounted)がfalseを表示します。これは、unmount()関数が呼び出されたためです。最終的に、Childコンポーネントはnullを返し、表示されません。