cf.completefrontend

Predict the outputEasy

What does this ref counter log and show after three clicks?

The click count is kept in a ref, logged in the handler, and shown in the button's text. The component logs render each time it renders.

What does it log, and what does the page show?
import { useRef } from "react";
 
export default function App() {
  const clicks = useRef(0);
  console.log("render");
 
  function handleClick() {
    clicks.current = clicks.current + 1;
    console.log("clicks", clicks.current);
  }
 
  return <button onClick={handleClick}>Clicked {clicks.current} times</button>;
}

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

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