A clickable box counts how many times it has been clicked and displays the count. The count should update correctly on every click.
Click the box repeatedly - the display stays at Clicks: 0 forever. The value is being tracked internally but never causes a re-render.
The click handler runs - so why doesn't the screen update?
The click handler runs - so why doesn't the screen update?
Why this fixes it
`countRef.current += 1` mutated the ref's value correctly, but ref mutations are entirely outside React's update cycle - React has no mechanism to observe them, so no re-render was ever scheduled and the JSX kept displaying the value from the last render, which was always `0`. Replacing `useRef` with `useState` and `countRef.current += 1` with `setCount(c => c + 1)` routes the update through React's state system, which schedules a re-render after every call to the setter.