← All React exercises

React quiz · 06

React re render 5 context

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, memo, createContext, useEffect, useContext} from 'react'
5import { createRoot } from 'react-dom/client'
6
7const MyContext = createContext(0);
8
9function B() {
10  const count = useContext(MyContext)
11  console.log('B')
12  return null
13}
14
15const A = memo(() => {
16  console.log('A')
17  return <B/>
18})
19
20function C() {
21  console.log('C')
22  return null
23}
24function App() {
25  const [state, setState] = useState(0)
26  useEffect(() => {
27    setState(state => state + 1)
28  }, [])
29  console.log('App')
30  return <MyContext.Provider value={state}>
31    <A/>
32    <C/>
33  </MyContext.Provider>
34}
35
36const root = createRoot(document.getElementById('root'));
37root.render(<App/>)