What is forwardRef in React?
Learn what forwardRef is in React, why refs don't pass through props, and how to forward a ref to a custom input, plus its use with useImperativeHandle.
Expected Interview Answer
forwardRef is a React API that lets a component receive a ref from its parent and forward it down to a child DOM node or component, so the parent can directly access that underlying element.
Normally refs don't pass through props, so a parent can't reach the DOM node inside a child component. Wrapping a component in forwardRef gives it a second argument, ref, which you attach to the element you want to expose. This is essential for reusable components like custom inputs or buttons where the parent needs to call focus(), measure, or scroll the inner element. It is often paired with useImperativeHandle to expose a controlled, limited API instead of the raw node.
- Lets parents access a child's underlying DOM node
- Enables focus, scroll, and measurement of inner elements
- Essential for reusable input, button, and field components
- Pairs with useImperativeHandle to expose a controlled API
- Keeps component internals encapsulated while sharing a ref
AI Mentor Explanation
forwardRef is like a captain relaying the coach's exact field-placement instruction straight to a specific fielder, rather than shouting it at the whole team. The message passes through the captain but is aimed at one player. A parent's ref passes through the wrapper component and lands precisely on the inner DOM node it needs to control.
Step-by-Step Explanation
Step 1
Identify the need
A parent must reach a DOM node inside a reusable child component, e.g. to call focus() on a custom input.
Step 2
Wrap with forwardRef
Define the component as forwardRef((props, ref) => ...), giving it a second ref argument alongside props.
Step 3
Attach the ref
Place ref on the inner element you want to expose, such as <input ref={ref} />.
Step 4
Pass a ref from the parent
Create a ref with useRef in the parent and pass it to the component like any other ref prop.
Step 5
Use the node
The parent can now call ref.current.focus(), measure, or scroll the exposed element directly.
What Interviewer Expects
- Understanding that refs don't pass through props by default
- Knowing the (props, ref) signature of forwardRef
- Attaching the ref to a specific inner element
- Common use cases like focusing a custom input
- Awareness of useImperativeHandle for a controlled API
Common Mistakes
- Expecting a ref passed to a normal component to reach its DOM node
- Forgetting to attach the forwarded ref to an inner element
- Confusing the ref argument with a prop named ref
- Overusing refs where props and state would be cleaner
- Exposing the raw node when useImperativeHandle would be safer
Best Answer (HR Friendly)
“forwardRef is a React feature that lets a parent component reach an element hidden inside a child, so it can do things like put the cursor in a custom text box. It's the standard way to build reusable inputs and buttons that the rest of the app can still control directly.”
Code Example
import { forwardRef, useRef } from 'react';
const TextInput = forwardRef(function TextInput(props, ref) {
return <input ref={ref} className="field" {...props} />;
});
function Form() {
const inputRef = useRef(null);
const focusInput = () => {
// Parent reaches the inner DOM node directly
inputRef.current.focus();
};
return (
<div>
<TextInput ref={inputRef} placeholder="Your name" />
<button onClick={focusInput}>Focus the input</button>
</div>
);
}Follow-up Questions
- How does useImperativeHandle work with forwardRef?
- Why can't you pass a ref through props like a normal value?
- When should you avoid using refs entirely?
- How do you forward a ref through several nested components?
- What is the difference between a callback ref and an object ref?
MCQ Practice
1. Why is forwardRef needed?
React does not pass ref as a normal prop; forwardRef gives a component a ref argument so it can forward the ref to an inner element.
2. What is the function signature used with forwardRef?
forwardRef calls your render function with (props, ref), where ref is the second argument to attach to an element.
3. Which Hook is commonly paired with forwardRef to expose a limited API?
useImperativeHandle lets you customize the value exposed on the forwarded ref, sharing a controlled API instead of the raw node.
Flash Cards
What does forwardRef do? — Lets a component receive a ref and forward it to an inner DOM node or component.
What is its function signature? — (props, ref) — ref is the second argument.
Why is it needed? — Because refs are not passed through as normal props by default.
Which Hook pairs with it? — useImperativeHandle, to expose a controlled, limited API.
A typical use case? — A reusable custom input whose parent needs to call focus().