What are refs and why do we need them?

We use refs when you want a component to “remember” some information, but don’t want that information to trigger new renders.

Points to remember:

1
ref returns a reference to the element.
2
Refs are an escape hatch to hold onto values that aren’t used for rendering. You won’t need them often.
3
A ref is a plain JavaScript object with a single property called current, which you can read or set.
4
You can ask React to give you a ref by calling the useRef Hook.
5
Like state, refs let you retain information between re-renders of a component.
6
Unlike state, setting the ref’s current value does not trigger a re-render.
7
Don’t read or write ref.current during rendering. This makes your component hard to predict.

We use a ref when your component needs to “step outside” React and communicate with external APIs—often a browser API that won’t impact the appearance of the component. Here are a few of these rare situations:

1
If your component needs to store some value, but it doesn’t impact the rendering logic, choose refs.
2
Storing timeout IDs
3
Storing and manipulating DOM elements
4
Storing other objects that aren’t necessary to calculate the JSX.

Difficulty: 4/10

Topics: useRef, forwardRef, DOM access

Scenario Questions

0-2 years experience

1
You need to focus an input field automatically when a modal opens. How would you use a ref to accomplish that?
2
If you try to read a DOM element’s size directly in a functional component without a ref, what issues might you run into?
3
How would you store a mutable counter that persists across renders without causing the component to re‑render?

2-5 years experience

1
We’re adding a third‑party chart library that requires a container DOM node. Walk me through setting it up with refs and any pitfalls to watch for.
2
A component that uses a ref to measure its width stops updating after a state change. What could be causing that bug?
3
Why might you choose a ref instead of state to track whether a dropdown is open, and what trade‑offs does that involve?

5-8 years experience

1
In a virtualized list we need to keep the scroll position without triggering re‑renders. How would you design that using refs?
2
Explain how forwardRef affects component composition and what pitfalls you need to guard against in a shared component library.
3
We have a performance‑critical animation that updates DOM properties on every frame. How would you use refs to avoid React’s reconciliation overhead?

8+ years experience

1
Our legacy codebase uses string refs and findDOMNode extensively. What migration strategy would you propose to replace them with modern ref patterns while minimizing risk?
2
When building a UI framework used across multiple products, how do you decide which internal state belongs in refs versus React state to balance performance and debuggability?
3
Describe the guidelines you’d set for cross‑team usage of forwardRef and useImperativeHandle to expose imperative APIs without breaking encapsulation.

Follow-up Questions

❓When would you prefer useRef over useState for storing a value?
❓What are the risks of accessing a ref’s current value before the component mounts?
❓How do you test a component that relies on a ref to a DOM node?