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.
- 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.
- 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.
Scenario Questions
0-2 years experience
- 1You need to focus an input field automatically when a modal opens. How would you use a ref to accomplish that?
- 2If you try to read a DOM element’s size directly in a functional component without a ref, what issues might you run into?
- 3How would you store a mutable counter that persists across renders without causing the component to re‑render?
2-5 years experience
- 1We’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.
- 2A component that uses a ref to measure its width stops updating after a state change. What could be causing that bug?
- 3Why 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
- 1In a virtualized list we need to keep the scroll position without triggering re‑renders. How would you design that using refs?
- 2Explain how forwardRef affects component composition and what pitfalls you need to guard against in a shared component library.
- 3We 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
- 1Our legacy codebase uses string refs and findDOMNode extensively. What migration strategy would you propose to replace them with modern ref patterns while minimizing risk?
- 2When 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?
- 3Describe 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?