What things can be referenced using refs? Use cases of refs?

0-2 years experience

1. 1You need to focus an input element automatically when a modal opens. How would you use a ref to accomplish that?
2. 2If 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. 3What happens if you try to read a ref's .current property before the component has mounted?

2-5 years experience

1. 1Our 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. 2We 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. 3When converting a class component that used this.myRef = React.createRef() to a functional component, what changes are required and what pitfalls might appear?

5-8 years experience

1. 1In 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. 2A 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. 3Discuss the implications of storing a mutable object like a canvas context in a ref versus in state when building a high‑frequency drawing app.

8+ years experience

1. 1Our 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. 2We 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. 3When 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?