cf.completefrontend

Predict the outputHard

With Strict Mode on, what does this component log on mount and after one click?

The component counts its calls in a module variable, logs from its body, from its state initializer, and from a useMemo calculation, and shows the call count on the page. It's rendered inside <StrictMode> in development.

What does it log, and what does the page show?
import { useMemo, useState } from "react";
 
let calls = 0;
 
export default function App() {
  calls = calls + 1;
  const [count, setCount] = useState(() => {
    console.log("initial state");
    return 0;
  });
  const doubled = useMemo(() => {
    console.log("calculate", count);
    return count * 2;
  }, [count]);
  console.log("render", count, "call", calls);
 
  return (
    <>
      <p>Doubled: {doubled}</p>
      <p>Calls: {calls}</p>
      <button
        onClick={() => {
          console.log("click");
          setCount(count + 1);
        }}
      >
        Add
      </button>
    </>
  );
}

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

  1. You click Add 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…