cf.completefrontend

Predict the outputMedium

What does this counter log when you click Add three times, quickly?

Each click calls setCount(count + 1) and starts a 50 ms timer that logs count. You click three times in a row, and then the timers fire.

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

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

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