React quiz - re-render & context 2

Context adds dependency between the consumer and provider.

re-render & context 2 (pass rate: 32%)react@18.3.1

{...}
import * as React from "react";
import { useState, createContext, useEffect, useContext } from "react";
import { createRoot } from "react-dom/client";
const Context = createContext(0);
const A = ({ children }) => {
  const [state, setState] = useState(0);
  console.log("A");
  useEffect(() => {
    setState((state) => state + 1);
  }, []);
  return <Context.Provider value={state}>{children}</Context.Provider>;
};
function B({ children }) {
  const count = useContext(Context);
  console.log("B");
  return children;
}
function C() {
  console.log("C");
  return null;
}
function D() {
  console.log("D");
  return null;
}
function App() {
  console.log("App");
  return (
    <A>
      <B>
        <C />
      </B>
      <D />
    </A>
  );
}
const root = createRoot(document.getElementById("root"));
root.render(<App />);

{...}
import * as React from "react";
import { useState, createContext, useEffect, useContext } from "react";
import { createRoot } from "react-dom/client";
const Context = createContext(0);
const A = ({ children }) => {
  const [state, setState] = useState(0);
  console.log("A");
  useEffect(() => {
    setState((state) => state + 1);
  }, []);
  return <Context.Provider value={state}>{children}</Context.Provider>;
};
function B({ children }) {
  const count = useContext(Context);
  console.log("B");
  return children;
}
function C() {
  console.log("C");
  return null;
}
function D() {
  console.log("D");
  return null;
}
function App() {
  console.log("App");
  return (
    <A>
      <B>
        <C />
      </B>
      <D />
    </A>
  );
}
const root = createRoot(document.getElementById("root"));
root.render(<App />);

What gets logged in order?

click on the console.log lines to input your answer.