Function components cannot be given refs

What is Function components cannot be given refs?

Function components do not have instances, so they cannot receive refs. Attempting to pass a ref prop to a function component fails unless the component is wrapped in React.forwardRef().

Common Causes

• Passing refs to standard custom function components.

Common Mistakes

• Expecting standard function components to yield reference nodes without declaring ForwardRef bindings.

How to Fix

Framework-Specific Examples

No framework examples required for this informational status.

const CustomInput = () => <input />;

function Parent() {
  const inputRef = useRef();
  return <CustomInput ref={inputRef} />;
}

import { forwardRef } from 'react';

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

function Parent() {
  const inputRef = useRef();
  return <CustomInput ref={inputRef} />;
}

Best Practices

• Apply ForwardRef wrappers on custom input elements.

Frequently Asked Questions (FAQ)