Refs Forwarding

What Is Ref Forwarding?

You've learned about refs — they let you access DOM elements directly. But what if you want a parent component to access a child component's DOM element? That's where ref forwarding comes in. It's like giving someone a key to a room they normally can't enter.

Ref forwarding is a technique for passing a ref through a component to one of its children. It lets you expose a child's DOM node to a parent component, which is especially useful when you're building reusable components.

Using forwardRef

The forwardRef function is React's solution for this. You wrap your component with forwardRef, and it gives you a second argument — the ref from the parent. You then attach that ref to whatever DOM element you want the parent to access.

Think of it like passing a message through a friend. The parent gives the ref to forwardRef, forwardRef passes it along to the child, and the child attaches it to the right element. It's a chain of trust.

import { forwardRef, useRef } from "react";

const FancyInput = forwardRef((props, ref) => {
  return (
    <input
      ref={ref}
      style={{ padding: "10px", fontSize: "16px" }}
      {...props}
    />
  );
});

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

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

  return (
    <div>
      <FancyInput ref={inputRef} placeholder="Click the button" />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

When to Use Ref Forwarding

You'll need ref forwarding when you're building reusable components that wrap native DOM elements. If you create a custom input, button, or other interactive component, you might want to let parents focus it, measure it, or perform other DOM operations.

It's also useful for integrating with third-party libraries that need direct DOM access. Or when you're building component libraries and want to give users control over the underlying DOM nodes.

const CustomButton = forwardRef((props, ref) => {
  return (
    <button
      ref={ref}
      className="custom-button"
      {...props}
    />
  );
});

function App() {
  const btnRef = useRef(null);

  return (
    <div>
      <CustomButton ref={btnRef}>Click me</CustomButton>
      <button onClick={() => btnRef.current.click()}>
        Trigger Click
      </button>
    </div>
  );
}

Common Use Cases

Ref forwarding is everywhere once you start looking. Form libraries use it to access input values. Animation libraries use it to manipulate elements. UI component libraries use it to provide focus management.

But don't overuse it. If you just need to pass data between components, use props. Ref forwarding is for when you genuinely need direct DOM access across component boundaries. It's a powerful tool, but like all powerful tools, use it wisely.