One Tip a Week: React Refs Beyond DOM Nodes

This week’s tip of the week is for React devs. We’re revisting React refs. React Conf was last week, so seems appropriate to drop some React knowledge.

When most folks think of useRef in React, they think of grabbing a reference to a DOM node for like focusing an input. But refs can do much more.

A ref is really just a persistent container whose .current value survives re-renders without triggering a re-render itself. That means you can use refs to:

• Store values you don’t want causing re-renders (like timeouts, intervals, or previous values).

• Keep references to external libraries or APIs.

• Track mutable state across renders without state management overhead.

In short: Refs aren’t just for DOM nodes. They’re for any value you want to persist across renders without re-rendering your component.

If you want a deeper dive with examples, I wrote a full post on it here, The React useRef Hook: Not Just for HTML Elements. A more recent example can be found in an MCP client I’ve been working on for work.

That’s it! Short and sweet. Until the next one!