BFE.devでのAI解答例 - React クイズ
9. React re-render 6 - Context

このReactコンポーネントの階層は以下のようになります：

• App
  • A
    • B
      • C
    • D

useContextを使用してMyContextから値を取得するため、コンポーネントBはMyContextの値をログに出力します。

Appコンポーネントがレンダリングされると、子コンポーネントAが最初にレンダリングされ、MyContextが提供され、その初期値は0です。AにはuseEffectがあり、それによってstateが更新され、レンダリングされたことが原因で値が1に変更されます。

次にBがレンダリングされ、これによりMyContext.Providerから値1が受け取られます。Cがレンダリングされ、最後にDがレンダリングされます。

結果として、以下がコンソールに出力されます：

A B C D

すなわち、回答は「A、B、C、D」となります。