CodePark/ questions / Refs
START PRACTICINGPRACTICE
Frontend question · React › Refs

The button is clicked three times and nothing else happens. What does it display?

function Counter() {
  const count = useRef(0);
  return (
    <button onClick={() => { count.current += 1; }}>
      {count.current}
    </button>
  );
}
0

The button shows 0. After three clicks, count.current is 3. But changing a ref does not re-render. So the button still shows the value from the last render, 0.

3 is the tempting wrong answer. The value did change, but nothing told React to draw it again. Refs are not read-only, so nothing throws. Use state for anything displayed on the screen.