✅ What Is `React.forwardRef`?

React.forwardRef is a special React API that allows a parent component to pass a ref down to a child component.

By default, ref works only with:

DOM elements (like input, div)
Class components

If you try to attach a ref to a normal function component, React simply ignores it.
forwardRef solves this problem by allowing function components to receive and forward refs to inner DOM elements—or even expose a custom API.

In short:

forwardRef lets function components behave like ref-aware components.

🚀 Basic Syntax

const MyComponent = React.forwardRef((props, ref) => {
  return <div ref={ref}>Hello World</div>;
});

Important things to notice:

ref is the second argument (after props)
This is what makes forwardRef different from a normal function component
The forwarded ref is attached to a DOM element inside the component

🧠 Key Concepts Explained

Concept	What It Means
Ref forwarding	Passing a ref from parent → child
Inner DOM access	Parent can interact with child DOM nodes
Custom API exposure	Expose methods instead of raw DOM

🔧 Example 1: Forwarding a DOM Node to the Parent

Imagine you’re building a reusable input component, and the parent wants to call .focus() on it.

`FancyInput.js`

import React from "react";

const FancyInput = React.forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

FancyInput.displayName = "FancyInput";

export default FancyInput;

`Parent.js`

import React, { useRef } from "react";
import FancyInput from "./FancyInput";

function Parent() {
  const inputRef = useRef(null);

  return (
    <div>
      <FancyInput ref={inputRef} placeholder="Type here..." />
      <button onClick={() => inputRef.current?.focus()}>
        Focus the input
      </button>
    </div>
  );
}

What’s happening?

The parent passes a ref to FancyInput
FancyInput forwards that ref to the <input>
The parent can now control the input directly

⚡ Example 2: Exposing Custom Methods with `useImperativeHandle`

Sometimes exposing the entire DOM element is not ideal.
Instead, you may want to expose only specific methods.

That’s where useImperativeHandle comes in.

`FancyInput.js`

import React, {
  useRef,
  forwardRef,
  useImperativeHandle,
} from "react";

const FancyInput = forwardRef((props, ref) => {
  const innerRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus() {
      innerRef.current?.focus();
    },
    clear() {
      if (innerRef.current) {
        innerRef.current.value = "";
      }
    },
  }));

  return <input ref={innerRef} {...props} />;
});

export default FancyInput;

`Parent.js`

import React, { useRef } from "react";
import FancyInput from "./FancyInput";

function Parent() {
  const fancyRef = useRef(null);

  return (
    <>
      <FancyInput ref={fancyRef} />
      <button onClick={() => fancyRef.current?.focus()}>
        Focus
      </button>
      <button onClick={() => fancyRef.current?.clear()}>
        Clear
      </button>
    </>
  );
}

Why this is better:

The parent cannot access the raw DOM
Only allowed methods (focus, clear) are exposed
Safer, cleaner, and more maintainable

📌 When Should You Use `forwardRef`?

Use forwardRef when:

The parent needs to call .focus(), .select(), or scroll methods
You need to measure size or position of a child element
You’re integrating with third-party libraries that require DOM access
You’re building reusable UI components (inputs, modals, buttons)

✅ Best Practices

Don’t overuse forwardRef — use it only when required
Prefer useImperativeHandle over exposing raw DOM nodes
Always set displayName for better debugging
Keep ref logic separate from props and state

🧾 Final Thoughts

React.forwardRef is a powerful tool that allows function components to work with refs, just like class components or DOM elements.

It’s especially useful when building reusable, flexible UI components that still give parent components controlled access to internal behavior.

Use it thoughtfully—for inputs, modals, animations, and third-party integrations—and your React components will become cleaner, safer, and more developer-friendly.

Forward Refs in React Explained with Examples