A component tracks how many times a user has clicked a secret area. The click count is stored in a ref. The displayed count never updates.
Click the secret area repeatedly — the counter on screen stays at 0. The ref value is updating internally but the UI never reflects it.
Refs are mutable containers that do not trigger re-renders when changed. If you need a value to appear in the UI, it must live in state.
Refs are mutable containers that do not trigger re-renders when changed. If you need a value to appear in the UI, it must live in state.
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. Because `count` is now state, React reads the latest value on each render and the displayed number reflects every click.