React Refs: Memory Without Re-renders

Why it exists

Components often need to remember information that doesn't directly affect the visual output. Using state for this is inefficient because it would cause unnecessary re-renders every time the value changes. Refs provide a way to store mutable values that persist across renders without triggering them.

The mental model

A ref is a plain JavaScript object with a single current property. Think of it as a box you can put anything in—a number, an object, or a timer ID. You can read from and write to this box directly, but React doesn't watch it. When you change what's inside, React doesn't re-render your component. It's a secret pocket, separate from the main rendering lifecycle.

How it works

You create a ref by calling the useRef hook and passing an initial value: const myRef = useRef(initialValue). This returns an object like { current: initialValue }. To access or update the value, you use myRef.current. For example, myRef.current = myRef.current + 1. This change is synchronous and mutable, but it will not cause your component to re-render. The value is preserved between renders, just like state.

When to use it

Use a ref when you need to store a value that isn't used for rendering. A classic case is storing an ID returned by a browser API like setInterval. You need to hold onto the ID to clear the timer later (e.g., in an event handler), but the ID itself is never displayed on the screen. Storing it in a ref avoids needless re-renders.

When not to use it

Do not use refs for data that you expect to be reflected in the UI. If a value changes and you want the user to see that change, it must be in state. The biggest mistake is assuming a ref update will refresh the UI. If the screen needs to change based on a value, that value belongs in state.

One canonical example

Building a stopwatch. You use state for the start time and current time because they are displayed on screen as secondsPassed. When you start the timer with setInterval, it returns an interval ID. This ID is needed to stop the timer later with clearInterval. You store this ID in a ref (const intervalRef = useRef(null)). The ID itself is never rendered, so it doesn't need to be state. This correctly separates rendering concerns (state) from internal logic management (refs).