JIYIK CN >

When we use a string as a reference in a function component, we get an error “ Function components cannot have string refs ”. To fix the error, use useRef()the hook to get a mutable ref object that we can use as a ref inside the component.

Here is the sample code that produces the above error

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 problem in your code snippet is that we use strings as references.

To work around the error, use useRefthe hook to obtain a mutable reference object instead.

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>
  );
}

useRef()The 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.

请注意, we have to access the current property of the ref object in order to access the input element on which we set the ref attribute.

When we pass the ref prop to an element, like, React sets the .current property of the ref object to the corresponding DOM node.

useRefThe hook creates a normal JavaScript object but gives you the same ref object on every render. In other words, it's almost a .currentmemoized object value with a property.

It is important to note that when you change the value of the ref's current attribute, it will not cause a re-render.

For example, ref does not have to be included useEffectin the dependencies array of the hook, since changing its current properties will not cause a re-render.

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 hook in the example useEffectis only run twice because useRefdoes not notify us when its content changes.

Changing the current properties of an object will not cause a re-render.