cf.completefrontend

Predict the outputHard

How many times does this component render when you click Set to 1 three times?

The button always calls setCount(1). App logs each render, its child Label logs its own renders, and an Effect with no dependency array logs after every commit.

What does it log, and what does the page show?
import { useEffect, useState } from "react";
 
function Label() {
  console.log("Label render");
  return <span>Counter</span>;
}
 
export default function App() {
  const [count, setCount] = useState(0);
  console.log("App render", count);
 
  useEffect(() => {
    console.log("effect", count);
  });
 
  return (
    <>
      <Label />
      <p>Count: {count}</p>
      <button onClick={() => setCount(1)}>Set to 1</button>
    </>
  );
}

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

  1. You click Set to 1 three times.

The answer

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

Checking your sign-in…