What messages will appear in the console when rendering this React component

Specify the order of output to the console for the following code:

 export default function App() {
  return (
    <Parent>
      <Child />
    </Parent>
  );
}

function Parent({ children }) {
  console.log(1);

  useEffect(() => {
    console.log(2);
  }, []);

  return <div>{children}</div>;
}

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

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

  return <h1>Hi</h1>;
}