What is forwardRef in React: Simple Explanation and Example

forwardRef in React is a function that lets you pass a ref from a parent component to a child component, allowing the parent to directly access the child's DOM node or component instance. It helps when you want to control or interact with a child element from outside, especially for custom components.

How It Works

Imagine you have a friend who owns a toolbox (the child component), but you want to use a specific tool inside it (a DOM element or component method). Normally, you can't reach inside their toolbox directly. forwardRef acts like your friend handing you the tool directly, so you can use it yourself.

Technically, forwardRef lets a parent component send a ref down to a child component. This ref can then point to a DOM element or a React component instance inside the child. Without forwardRef, refs only work on native DOM elements or class components, not on functional components.

This makes it easier to manage focus, animations, or measure sizes by accessing the child’s DOM node directly from the parent.

Example

This example shows a parent component using forwardRef to access an input element inside a child component and focus it when a button is clicked.

jsx

import React, { useRef, forwardRef } from 'react';

const CustomInput = forwardRef((props, ref) => {
  return <input ref={ref} placeholder="Type here..." />;
});

export default function App() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={handleFocus}>Focus the input</button>
    </div>
  );
}

Output

A text input box with placeholder 'Type here...' and a button labeled 'Focus the input'. Clicking the button moves the cursor focus into the input box.

When to Use

Use forwardRef when you want a parent component to directly interact with a child component’s DOM node or instance, especially if the child is a functional component. Common cases include:

• Managing focus on input fields or buttons from a parent.
• Triggering animations or measuring size/position of child elements.
• Integrating with third-party libraries that require direct DOM access.

It helps keep components reusable and clean while still allowing external control when needed.

Key Points

• forwardRef passes refs through functional components.
• It enables parent components to access child DOM nodes or instances.
• Useful for focus management, animations, and DOM measurements.
• Helps keep components reusable and controlled externally.

Key Takeaways

forwardRef lets parents pass refs to child functional components to access DOM nodes.

It is essential for managing focus, animations, or direct DOM interactions from outside.

Use it when you need to control or measure child elements without breaking component encapsulation.

Without forwardRef, refs cannot be attached to functional components directly.