cf.completefrontend

Predict the outputMedium

What does this counter log and show when you click Add once?

The click handler calls setCount(count + 1) three times in a row, then logs count. The component logs count every time it renders too.

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

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

  1. You click Add once.

Practice it in the editor, with tests

The answer

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

Checking your sign-in…