forwardRef

Learn to forward a ref to a child component with forwardRef.

forwardRef

Sometimes you need to pass a ref to a child component. For example, if you write an input component and the parent wants to focus that input, you need to forward the ref.

For this you use forwardRef. You wrap the component with forwardRef; it takes ref as a second parameter and attaches it to the relevant DOM element.

A ref is not a prop; it does not come inside props. forwardRef handles the ref specially.

Binding ref to DOM

A component wrapped with forwardRef takes ref as its second parameter. You bind this ref to a DOM element inside with ref={ref}.

The parent creates a ref with useRef and passes it to the child as ref={myRef}. The child receives it via forwardRef and binds it to the relevant DOM element. This way the parent can access the child's DOM node.

This pattern is common in design system components; the parent wants to focus the underlying input.

Exercise FancyInput component

Complete the skeleton below. Write a FancyInput component with forwardRef; take (props, ref) and return <input ref={ref} {...props} />. Export it.

Show example solution

import { forwardRef } from "react";

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

export default FancyInput;

Test yourself

What does forwardRef do?
- State iletir
- Ref iletir
- Event yakalar
- Prop filtreler
Show answer

Ref iletir — forwardRef forwards a ref to a child component.

forwardRef wrapping

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

Show answer

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

forwardRef: match the terms

forwardRef

Forwards the ref
ref parameter

Second argument
ref={ref}

Binds to the DOM
useRef

Creates a ref

Next lesson: Summary - Advanced useRef

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies