React

Function components cannot have string refs

Function components cannot have string refs. We recommend using useRef() instead.

React threw this error because a string ref was attached to a function component. String refs are legacy behavior and are not supported on modern function-component patterns.

React error #309runtime

Observed message

Function components cannot have string refs. We recommend using useRef() instead.

Why it happens

Legacy string refs were used on a function component.
Older class-component ref patterns were copied into a function-component implementation.
A wrapper component passed a string ref into a component tree that now uses hooks.

How to fix it

Replace the string ref with `useRef()` in the parent component and pass the ref object correctly.
Use a callback ref if the ref needs custom assignment logic.
If the child component needs to expose a DOM node or imperative API, use `forwardRef`.

Official reference

React Docs: Minified React error #309

Related errors

Explore more