React Forward Ref

React Forward Ref

Ref forwarding is a specialized, opt-in capability that effectively lets specific React components natively take a ref they receive via props, and physically pass it further downward to a nested child component structure.

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} />