cf.completefrontend

Predict the outputMedium

A useCallback with [] dependencies reads state: what does it log after three adds?

Both handlers are wrapped in useCallback with an empty dependency array. add uses an updater function; report logs count.

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

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

  1. You click Add three times.
  2. You click Report.

The answer

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

Checking your sign-in…