refs on function components ⚛️ React

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

A ref was passed to a function component that doesn’t forward it.

Seen on: React

Meaning

Before React 19, function components need forwardRef to receive refs. Libraries (form libs, animation libs, tooltips) pass refs to your custom components.

Common causes

  • Custom input/button components used with refs
  • Library wrapping your component and attaching a ref

⚡ Quick fix

  1. Wrap with React.forwardRef and pass the ref to a DOM element
  2. React 19: accept ref as a normal prop

Detailed fix by platform

React

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

How to diagnose

  1. Component — Which one receives the ref?
  2. Version — React 18 or 19?

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.