Forwarding Refs to Child Components

Snippet

Forwarding Refs to Child Components

Ref forwarding is a technique for automatically passing a ref through a component to one of its children. This is especially useful for highly reusable 'leaf' components like buttons or inputs that need their DOM nodes accessed by parents for focus, selection, or measurements.

snippet.js
javascript
import { forwardRef, useRef } from 'react';
 
const CustomInput = forwardRef((props, ref) => (
  <input ref={ref} className="custom-input" {...props} />
));
 
function Parent() {
  const inputRef = useRef(null);
  const handleClick = () => inputRef.current.focus();
 
  return (
    <>
      <CustomInput ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </>
  );
}

react

Breakdown

const CustomInput = forwardRef((props, ref) => (

Wraps the component in forwardRef to accept a ref argument alongside props.

Attaches the forwarded ref directly to the underlying DOM element.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Forwarding Refs to Child Components

Related