React: set focus on componentDidMount, how to do it with hooks?

Question

In React, with classes I can set the focus to an input when the component loads, something like this:

class Foo extends React.Component {
    txt1 = null;

          


        

Answer 1

You can use the useRef hook to create a ref, and then focus it in a useEffect hook with an empty array as second argument to make sure it is only run after the initial render.

const { useRef, useEffect } = React;

function Foo() {
  const txt1 = useRef(null);

  useEffect(() => {
    txt1.current.focus();
  }, []);

  return ;
}

ReactDOM.render(, document.getElementById("root"));