useRef in React Explained: Beyond Just Accessing the DOM

useRef in React Explained: Beyond Just Accessing the DOM

useRef is often introduced as a way to access DOM elements, but it does more. Here is what it is, its use cases, and how it differs from useState.

What useRef Is

useRef returns a mutable object with a current property that persists across renders. Mutating current does not trigger a re-render, which is the key difference from useState.

Accessing the DOM

The most common use: store a reference to a DOM element. Assign ref={myRef} to an element, and myRef.current points to the DOM node, so you can focus it, read its size, and so on.

Storing Mutable Values

useRef is also for mutable values that should not trigger re-renders. A timer id, a previous value, or a flag for whether the component is mounted are good examples. These need to persist across renders but do not need to re-render.

How It Differs From useState

useState triggers a re-render when it changes. useRef does not. Use useState for values that should update the UI; use useRef for values that should persist without updating the UI.

No Dependency on Re-renders

Because useRef does not trigger re-renders, reading current in an effect or handler gives you the latest value, but changing current does not refresh the component to show that change.

Common Mistakes

Using useRef for state that should drive the UI, then wondering why the UI does not update. If a value should change the UI, it belongs in useState, not useRef.

The Takeaway

useRef returns a mutable object that persists across renders without triggering re-renders. Use it for DOM references and for mutable values that should not update the UI. Use useState for values that should drive the UI.