React re render 6 Context

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