React rendering quiz

A simple quiz to illustrate how React rendering works.

import React from "react";

export default Parent;

function Parent() {
  console.log("1");
  React.useEffect(() => {
    console.log("2");
  }, []);

  return (
    <>
      Parent component
      <br />
      <Child />
    </>
  );
}

function Child() {
  console.log("3");

  React.useEffect(() => {
    console.log("4");
  }, []);

  return <span>Child component</span>;
}

Try to guess what will be printed to console.

Answer

Some explanation:
⇾ First Parent is parsed and rendered, without useEffect,
⇾ after that Child, when there is no more nested components is turn of async hooks
⇾ React will run useEffect from children to parents.

Few more logs, probably related to dev mode.