useRef vs useState: When to Use Which in React

useRef vs useState: When to Use Which in React

useRef and useState both persist values across renders, but they behave very differently. Here is how to choose.

The Key Difference

useState triggers a re-render when it changes. useRef does not. This single difference determines which to use.

When to Use useState

Use useState for values that should drive the UI. Counters, form values, toggles, fetched data, anything where a change should update what the user sees.

When to Use useRef

Use useRef for values that should persist without triggering re-renders. DOM references, timer ids, previous values, flags for whether the component is mounted, and integration with non-React code.

The Mental Model

useState is for reactive state: changing it tells React to re-render. useRef is for instance-like values: persistent across renders but invisible to the render cycle.

A Common Mistake

Storing a value in useRef that should drive the UI, then wondering why the UI does not update. If the UI should react to a change, it belongs in useState.

Another Common Mistake

Storing a timer id in useState, which causes unnecessary re-renders when the id changes. Timer ids and similar internal values belong in useRef.

The Takeaway

Use useState for values that should trigger re-renders and drive the UI. Use useRef for values that should persist across renders without triggering re-renders. The key question is: should changing this value update the UI?