React Forward Ref

React Forward Ref

Ref forwarding lets a component receive a ref and pass it to one of its child DOM elements. This is useful when a parent component needs direct access to a nested input, button, or custom control.

Without ref forwarding, a ref attached to a custom component usually points to the component instance or nothing useful for DOM work.

Using forwardRef

import { forwardRef } from 'react';

const CustomInput = forwardRef((props, ref) => (
  <input ref={ref} {...props} />
));
// You can now successfully pass a native DOM ref down to <CustomInput ref={inputRef} />

When To Use It

• Building custom form controls that should still support focus.
• Wiring up a modal or popover to manage keyboard access.
• Connecting a reusable component to imperative browser APIs.

Common Mistakes

• Forgetting to wrap the component in forwardRef.
• Passing the ref to the wrong DOM element.
• Using ref forwarding when a normal prop would be simpler.

Why It Matters

Ref forwarding keeps reusable components flexible. Parent components can still control focus or measure layout without giving up component abstraction.