← All React exercises

React quiz · 04

React re render 4

StatusNot taken

Question

What does the code snippet to the right output by console.log?

Code

exercise.tsx
1// This is a React Quiz from BFE.dev 
2
3import * as React from 'react'
4import { useState, useEffect } from 'react'
5import { createRoot } from 'react-dom/client'
6
7function A({ children }) {
8  console.log('A')
9  const [state, setState] = useState(0)
10  useEffect(() => {
11    setState(state => state + 1)
12  }, [])
13  return children
14}
15
16function B() {
17  console.log('B')
18  return <C/>
19}
20
21function C() {
22  console.log('C')
23  return null
24}
25
26function D() {
27  console.log('D')
28  return null
29}
30
31function App() {
32  console.log('App')
33  return (
34    <div>
35      <A><B/></A>
36      <D/>
37    </div>
38  )
39}
40
41const root = createRoot(document.getElementById('root'));
42root.render(<App/>)