React quiz - re-render

A basic quiz to test your understanding of how React re-renders.

re-render [email protected], [email protected]

{...}
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
function A() {
  console.log("A");
  return <B />;
}
function B() {
  console.log("B");
  return <C />;
}
function C() {
  console.log("C");
  return null;
}
function D() {
  console.log("D");
  return null;
}
function App() {
  const [state, setState] = useState(0);
  useEffect(() => {
    setState((state) => state + 1);
  }, []);
  console.log("App");
  return (
    <div>
      <A state={state} />
      <D />
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

{...}
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
function A() {
  console.log("A");
  return <B />;
}
function B() {
  console.log("B");
  return <C />;
}
function C() {
  console.log("C");
  return null;
}
function D() {
  console.log("D");
  return null;
}
function App() {
  const [state, setState] = useState(0);
  useEffect(() => {
    setState((state) => state + 1);
  }, []);
  console.log("App");
  return (
    <div>
      <A state={state} />
      <D />
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

What gets logged in order?

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