BFE.devでのAI解答例 - React クイズ
13. useRef

このReactコンポーネントは、2つのdiv要素をレンダリングしています。refとstateという2つのReactフックを使っています。

1つ目のdiv要素には、stateが1の場合はrefを、それ以外の場合はnullを渡しています。同様に、2つ目のdiv要素には、stateが2の場合はrefを、それ以外の場合はnullを渡しています。

また、useEffectフックを使用して、コンポーネントがマウントされた時にsetState(2)を呼び出しています。

最後に、console.logを使って、ref.current?.textContentを記録しています。

このコンポーネントがレンダリングされた場合、ブラウザコンソールに何がログされますか？

答え： "2" がログされます。最初のdiv要素のrefは、stateが1の場合にのみ設定されますが、useEffectフックはコンポーネントのマウント時にsetState(2)を呼び出します。このため、レンダリング後に、ref.current?.textContentは2になります。