How to Use forwardRef in React: Simple Guide with Examples

In React, forwardRef lets you pass a ref from a parent component to a child component, allowing direct access to the child's DOM node or instance. You wrap your child component with React.forwardRef and use the ref argument inside it to attach the ref to an element.

Syntax

The forwardRef function takes a component function as an argument. This function receives props and a ref as parameters. You then attach the ref to a DOM element or component inside and return the JSX.

• React.forwardRef: Wraps your component to enable ref forwarding.
• props: The usual properties passed to the component.
• ref: The forwarded ref from the parent.

jsx

const FancyButton = React.forwardRef((props, ref) => {
  return <button ref={ref} className="fancy-button">{props.children}</button>;
});

Example

This example shows a parent component passing a ref to a child button component using forwardRef. The parent can then call focus() on the button directly.

jsx

import React, { useRef } from 'react';

const FancyButton = React.forwardRef((props, ref) => {
  return <button ref={ref} style={{ padding: '10px', fontSize: '16px' }}>{props.children}</button>;
});

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

  function handleClick() {
    if (buttonRef.current) {
      buttonRef.current.focus();
    }
  }

  return (
    <div>
      <FancyButton ref={buttonRef}>Click Me</FancyButton>
      <br />
      <button onClick={handleClick} style={{ marginTop: '10px' }}>
        Focus the Fancy Button
      </button>
    </div>
  );
}

Output

A page with a styled button labeled 'Click Me' and below it another button labeled 'Focus the Fancy Button'. Clicking the second button sets keyboard focus on the 'Click Me' button.

Common Pitfalls

• Not using React.forwardRef when trying to forward refs causes the ref to point to the component instance instead of the DOM node.
• Forgetting to attach the ref to a DOM element inside the child component means the ref will be null.
• Trying to forward refs to functional components without forwardRef will not work.

Example of wrong and right usage:

jsx

// Wrong: ref does not reach the DOM element
function Button(props) {
  return <button>{props.children}</button>;
}

// Parent trying to use ref
const ref = React.createRef();
// <Button ref={ref}>Wrong</Button> // ref will be null

// Right: use forwardRef
const ButtonWithRef = React.forwardRef((props, ref) => {
  return <button ref={ref}>{props.children}</button>;
});

Quick Reference

• Use case: Pass refs through components to access DOM nodes.
• Syntax: React.forwardRef((props, ref) => <element ref={ref} />)
• Remember: Only functional components can use forwardRef.
• Ref target: Attach ref to a DOM element or class component inside.

Key Takeaways

Use React.forwardRef to pass refs from parent to child components.

Attach the forwarded ref to a DOM element inside the child component.

Without forwardRef, refs do not reach functional child components.

forwardRef enables parent components to control child DOM nodes directly.

Always test that the ref points to the expected element before using it.