How to Pass Ref to Child Component in React

React has become my go-to framework for building dynamic user interfaces, and over the past eight years, I’ve encountered many scenarios where passing a ref to a child component is essential. Whether you’re managing focus, triggering animations, or integrating with third-party libraries, understanding how to forward refs correctly can save you time and headaches.

In this article, I’ll walk you through how to pass refs to child components in React with practical examples. I’ll cover the built-in forwardRef method and some alternative approaches. By the end, you’ll be confident in managing refs across your React components efficiently.

Table of Contents

Pass a Ref to a Child Component

Refs in React provide a way to access DOM elements or class component instances directly. Often, you might want to manipulate a child component’s internal DOM node, like focusing an input or measuring its size.

However, passing refs down to child components isn’t straightforward because refs don’t automatically get passed as props. You need to forward them explicitly.

From my experience working on complex forms and interactive dashboards for US clients, mastering ref forwarding has been crucial. It helps maintain clean code and keeps components reusable.

Method 1: Use React.forwardRef (Recommended)

The official and most robust way to pass refs to child components is by using the React.forwardRef API. This allows a parent component to pass a ref that the child can attach to any DOM node or component instance.

How It Works

forwardRef takes a rendering function that receives props and ref as arguments. You then attach the ref to the desired element inside the child.

Example: Focusing on an Input in a Child Component

Here’s a practical example where a parent button focuses an input inside a child component:

import React, { useRef } from 'react';

// Child component using forwardRef
const TextInput = React.forwardRef((props, ref) => {
  return <input type="text" ref={ref} placeholder="Enter your name" />;
});

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

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

  return (
    <div style={{ padding: '20px' }}>
      <TextInput ref={inputRef} />
      <button onClick={handleFocus} style={{ marginLeft: '10px' }}>
        Focus Input
      </button>
    </div>
  );
}

export default ParentComponent;

You can see the output in the screenshot below.

TextInput is wrapped with React.forwardRef to accept the ref.
The ref is attached to the <input> element inside TextInput.
The parent uses useRef to create a ref and passes it to TextInput.
Clicking the button triggers focus on the input.

This method is clean, reusable, and the most “React way” to handle refs.

Method 2: Use Callback Refs (Less Common)

Before forwardRef was introduced, callback refs were a popular workaround. You define a function that gets called with the DOM element when it mounts.

Example: Callback Ref to Access Child DOM

import React, { useState } from 'react';

function TextInput(props) {
  return <input type="text" placeholder="Enter your name" ref={props.inputRef} />;
}

function ParentComponent() {
  const [inputElement, setInputElement] = useState(null);

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

  return (
    <div style={{ padding: '20px' }}>
      <TextInput inputRef={setInputElement} />
      <button onClick={handleFocus} style={{ marginLeft: '10px' }}>
        Focus Input
      </button>
    </div>
  );
}

export default ParentComponent;

You can see the output in the screenshot below.

The parent passes a function setInputElement as a prop.
When the input mounts, React calls this function with the DOM node.
The parent stores the DOM node in state and uses it to call .focus().

While this works, it’s less elegant and can lead to unnecessary re-renders. I recommend using forwardRef unless you have a specific reason not to.

Method 3: Forward Refs with Class Components

If you’re working with legacy class components, forwardRef still works, but you must forward the ref to the class instance.

Example: Forward Ref to a Class Component

import React from 'react';

class CustomInput extends React.Component {
  focus() {
    this.inputRef.focus();
  }

  render() {
    return <input ref={(el) => (this.inputRef = el)} placeholder="Class input" />;
  }
}

const ForwardedCustomInput = React.forwardRef((props, ref) => (
  <CustomInput {...props} refInstance={ref} />
));

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.customInputRef = React.createRef();
  }

  componentDidMount() {
    if (this.customInputRef.current) {
      // Call the focus method on the class instance
      this.customInputRef.current.focus();
    }
  }

  render() {
    return <ForwardedCustomInput ref={this.customInputRef} />;
  }
}

export default Parent;

You can see the output in the screenshot below.

The class component manages its own internal ref to the input.
forwardRef wraps the class component and passes the ref as a prop (refInstance).
The parent accesses the class instance via the forwarded ref.

Note: This is more complex and less common in modern React apps, which favor function components.

Best Practices When Passing Refs

Use forwardRef wherever possible: It’s the cleanest and officially supported method.
Avoid passing refs as regular props: This breaks the React ref system.
Don’t overuse refs: Try to solve problems declaratively first. Use refs mainly for imperative actions like focusing or measuring.
Name your refs clearly: When forwarding, use descriptive names to avoid confusion.

Real-World Use Case: Manage Focus in a Form

In US-based web applications, accessibility and usability are top priorities. Managing focus correctly improves user experience, especially for screen reader users.

For example, after submitting a form, you might want to focus on the first invalid input. Using ref forwarding, you can centralize focus logic in the parent and keep input components reusable.

I hope this guide makes passing refs to child components in React clearer and easier for you. Whether you’re building a small widget or a large enterprise app, mastering refs will enhance your control over the UI.