What things can be referenced using refs? Use cases of refs?
In React, a ref is an object with a single .current property that persists between renders. Unlike state, updating a ref does not trigger a re-render of your component. This makes them the primary tool for escaping the standard React data flow. You can point a ref to any value. However, the most common use case for a ref is to access a DOM element.
For example, this is handy if you want to focus an input programmatically. When you pass a ref to a ref attribute in JSX, like <div ref={myRef}>, React will put the corresponding DOM element into myRef.current. Once the element is removed from the DOM, React will update myRef.current to be null.
- 1
Managing focus, text selection, or media playback.
- 2
Triggering imperative animations.
- 3
Timer IDs, previous props or state
- 4
External Library Instances (Mapbox/Google Maps, echarts)
- 5
Integrating with third-party DOM libraries.
Scenario Questions
- 1
You need to focus an input element automatically when a modal opens. How would you use a ref to accomplish that?
- 2
If you attach a ref to a custom child component, what value do you receive and how could you call a method on that component?
- 3
What happens if you try to read a ref's .current property before the component has mounted?
- 1
Our team added a third‑party chart library that expects a DOM node, but after a refactor it throws ‘null is not an object’. Walk me through how you'd debug the ref usage.
- 2
We want to animate a list item's height using the Web Animations API. Explain how you'd store the element reference and why you wouldn't use state for this.
- 3
When converting a class component that used this.myRef = React.createRef() to a functional component, what changes are required and what pitfalls might appear?
- 1
In a large form we need to programmatically scroll to the first invalid input after validation. Describe a scalable approach using refs, considering performance and cleanup.
- 2
A component must expose an imperative handle (e.g., focus, reset) to its parent while staying reusable. How would you implement this with forwardRef and useImperativeHandle, and what trade‑offs does it introduce?
- 3
Discuss the implications of storing a mutable object like a canvas context in a ref versus in state when building a high‑frequency drawing app.
- 1
Our legacy codebase mixes string refs, callback refs, and createRef across many modules. Propose a migration strategy to unify ref usage, addressing backward compatibility and team onboarding.
- 2
We are building a design‑system library that must work with both React 16 (class components) and React 18 (hooks). How would you design the ref API to be consistent and future‑proof, and what constraints does this impose on the library's internal architecture?
- 3
When embedding a React tree inside a non‑React framework (e.g., Angular), what considerations around refs and DOM ownership arise, and how would you manage them to avoid memory leaks?
Follow-up Questions
- ❓Could you sketch a minimal code example for that?
- ❓What would you do differently if the component needed to be reusable across many places?
- ❓How does this approach affect unit testing or SSR?