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.
Exact message you may see
Function components cannot be given refsDid you mean to use React.forwardRef()
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
- Wrap with React.forwardRef and pass the ref to a DOM element
- React 19: accept ref as a normal prop
Detailed fix by platform
React
const Input = forwardRef((props, ref) => <input ref={ref} {...props} />);
How to diagnose
- Component — Which one receives the ref?
- Version — React 18 or 19?
🔧 Still not fixed?
Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:
Similar errors
Most viewed in React
- Objects are not valid as a React child Error: Objects are not valid as a React child
- No QueryClient set Error: No QueryClient set, use QueryClientProvider to set one
- Functions cannot be passed Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
Other ways to find it
Where this error sits
Origin: On your device. Errors that are often confused with or caused by this one (click to open):
🧠 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.
💬 What worked for others
No tips yet — did something else fix this for you?
Share what worked for you
Tips are checked by an editor before they appear. Links are removed.
Did this fix work for you?
Report a correction or suggest an improvement
Last updated 14 Oct 2026