How do you create and use refs?

There are two ways to use refs:

1
In Functional Components: We use useRef Hook It returns a mutable object that persists for the full lifetime of the component.
2
In Class Components: React.createRef(), Similar to useRef, it creates an object with a .current property.
3
In Class Components: Callback method, Instead of passing a ref object created by createRef, you pass a function. React will call this function with the DOM element when the component mounts, and with null when it unmounts.

createRef() method : Refs are created using React.createRef() method and attached to React elements via the ref attribute. To use refs throughout the component, just assign the ref to the instance property within a constructor.

Callback method : we add a ref attribute to your component whose value is a callback function that will receive the underlying DOM element or the mounted instance of the component as its first argument.

1
We simply set the ref attribute in the <input> with a function instead of ref attribute created by useRef().
2
This function receives the DOM node and assigns it to the inputRef we declared before.
3
Since we didn't create a ref with useRef the inputRef variable stores the DOM element itself hence we don't need to access the .current property, as you can see in the onClick and onFocusClick functions.

javascript

Difficulty: 5/10

Topics: useRef, forwardRef, callback refs

Scenario Questions

0-2 years experience

1
We need to focus an input element when a button is clicked. How would you implement that using refs?
2
If you assign a ref to a DOM node and later read ref.current, what do you expect to see before the component mounts?
3
How could you store a mutable counter that updates without causing a re‑render using refs?

2-5 years experience

1
Our modal component must trap focus inside it. Explain how you'd use refs to manage focus order and why a ref is preferable to state here.
2
During a code review you see a component using document.getElementById to access a child div. How would you refactor it with refs, and what pitfalls might you encounter?
3
We need to integrate a third‑party chart library that requires a container DOM node. Walk through the steps using refs and what you’d do if the ref is null on the first render.

5-8 years experience

1
In a large form with dozens of fields, we want to scroll to the first invalid input after validation. Design a scalable strategy using refs that avoids memory leaks.
2
Compare useRef and createRef for a component rendered many times in a list. Which would you choose and why?
3
A performance‑critical component must measure its size on every resize without causing re‑renders. How would you implement this with refs and what edge cases must you guard against?

8+ years experience

1
Our product is migrating from class components to functional components across many teams. How would you standardize ref usage, especially when forwarding refs through higher‑order components?
2
We need to expose an imperative API from a reusable component library (e.g., a custom video player). Describe how you'd design the ref interface, version it, and communicate breaking changes across teams.
3
When multiple third‑party widgets each need a DOM node, how would you architect a shared ref management system to avoid collisions and simplify testing?

Follow-up Questions

❓What value does ref.current hold before the component mounts?
❓When would you choose a callback ref instead of useRef?
❓How does forwardRef change the way a component is consumed?