cf.completefrontend

Predict the outputMedium

In what order do a parent's and a child's Effects run on mount, and clean up on unmount?

Parent renders Child. Both log when they render, when their Effect runs, and when it cleans up. The app isn't in Strict Mode.

What does it log, and what does the page show?
import { useEffect, useState } from "react";
 
function Child() {
  console.log("render Child");
  useEffect(() => {
    console.log("Child effect");
    return () => console.log("Child cleanup");
  }, []);
  return <p>Child</p>;
}
 
function Parent() {
  console.log("render Parent");
  useEffect(() => {
    console.log("Parent effect");
    return () => console.log("Parent cleanup");
  }, []);
  return <Child />;
}
 
export default function App() {
  const [show, setShow] = useState(true);
  return (
    <>
      {show && <Parent />}
      <button onClick={() => setShow(false)}>Hide</button>
    </>
  );
}

It runs in development, rendered as <App />, and then:

  1. You click Hide once.

The answer

Work out every line it logs, in order, and what the page shows at the end. Then check.

Checking your sign-in…