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 ); } function Child() { console.log("3"); React.useEffect(() => { console.log("4"); }, []); return Child component; } 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.

May 8, 2025 - 11:06

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 componentspan>;
}

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.