Function components cannot have string refs in React

avatar

Borislav Hadzhiev

Last updated: Apr 5, 2022

banner

Photo from Unsplash

Function components cannot have string refs in React #

The error "Function components cannot have string refs" occurs when we use a string as a ref in a function component. To solve the error use the useRef() hook to get a mutable ref object that you can use as a ref inside of the component.

function components cannot have string refs

Here is an example of how the error occurs.

App.js
export default function App() { // A string ref has been found within a strict mode tree. // ⛔️ Function components cannot have string refs. // We recommend using useRef() instead. return ( <div> <input type="text" id="message" ref="msg" /> </div> ); }

The issue in the code snippet is that we are using a string as a ref.

To solve the error, use the useRef hook to get a mutable ref object instead.

App.js
import {useEffect, useRef} from 'react'; export default function App() { const refContainer = useRef(null); useEffect(() => { // 👇️ this is reference to input element console.log(refContainer.current); refContainer.current.focus(); }, []); return ( <div> <input type="text" id="message" ref={refContainer} /> </div> ); }

The useRef() hook can be passed an initial value as an argument. The hook returns a mutable ref object whose .current property is initialized to the passed argument.

Notice that we have to access the current property on the ref object to get access to the input element on which we set the ref prop.

When we pass a ref prop to an element, e.g. <input ref={myRef} />, React sets the .current property of the ref object to the corresponding DOM node.

The useRef hook creates a plain JavaScript object, but gives you the same ref object on every render. In other words, it's pretty much a memoized object value with a .current property.

It should be noted that when you change the value of the current property of the ref, no re-renders are caused.

For example, a ref doesn't have to be included in the dependencies array of the useEffect hook because changing it's current property does not cause a re-render.

App.js
import {useEffect, useRef} from 'react'; export default function App() { const refContainer = useRef(null); const refCounter = useRef(0); useEffect(() => { // 👇️ this is reference to input element console.log(refContainer.current); refContainer.current.focus(); // 👇️ incrementing ref value does not cause re-render refCounter.current += 1; console.log(refCounter.current); }, []); return ( <div> <input type="text" id="message" ref={refContainer} /> </div> ); }

The useEffect hook in the example is only run 2 times because useRef doesn't notify us when its content changes.

Changing the object's current property does not cause a re-render.

Conclusion #

The error "Function components cannot have string refs" occurs when we use a string as a ref in a function component. To solve the error use the useRef() hook to get a mutable ref object that you can use as a ref inside of the component.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.