cf.completefrontend

Predict the outputEasy

Only Counter B's wrapper changes. What does the page log and show after you switch the layout?

Each Counter logs when it mounts and unmounts. Switching the layout changes Counter A's wrapper className, and Counter B's wrapper from a <div> to a <section>.

What does it log, and what does the page show?
import { useEffect, useState } from "react";
 
function Counter({ name }) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log("mount " + name);
    return () => console.log("unmount " + name);
  }, [name]);
  return (
    <button onClick={() => setCount(count + 1)}>
      {name}: {count}
    </button>
  );
}
 
export default function App() {
  const [wide, setWide] = useState(false);
  return (
    <>
      <div className={wide ? "wide" : "narrow"}>
        <Counter name="A" />
      </div>
      {wide ? (
        <section>
          <Counter name="B" />
        </section>
      ) : (
        <div>
          <Counter name="B" />
        </div>
      )}
      <button onClick={() => setWide(!wide)}>Switch layout</button>
    </>
  );
}

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

  1. You click Counter A twice.
  2. You click Counter B twice.
  3. You click Switch layout.

The answer

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

Checking your sign-in…