Learn React 19: The Complete Guide to Modern Web Apps/

...

/

Advanced useRef: Persisting Data and Preventing Re-Renders

Advanced useRef: Persisting Data and Preventing Re-Renders

Learn how useRef enables persistent, mutable storage that survives re-renders without causing them.

We'll cover the following...

In complex React applications, we often need to manage values that shouldn’t trigger re-renders or track information across renders—values that live outside the UI state. When we store such data in useState, each update forces a render—even when the UI doesn’t depend on it. This can lead to unnecessary work, jittery animations, or race conditions in asynchronous code. That’s where useRef shines.

The useRef Hook

The useRef Hook provides a stable, persistent container that lets us store mutable data or DOM references without re-rendering the component.

In React, every time a component re-renders, its local variables reset. The useRef Hook solves this by creating an object whose .current property persists across renders and can be updated without triggering a new render.

Syntax

const refContainer = useRef(initialValue);

Key characteristics

  • Persistent: The .current property remains the same object across renders. ...