How to focus input tag element using hooks in Reactjs?

Originally posted here!

To focus an element on an input tag element in reactjs, the basic idea is to get a reference to the input element tag and then use the focus() method on the input tag element on render.

TL;DR

// Import useRef and useLayoutEffect hooks
import { useRef, useLayoutEffect } from "react";

export default function InputTag() {
  // First Get Reference to the Input element in the DOM
  const inputElementRef = useRef();

  // Now We can focus the element
  // using the useLayoutEffect hook
  useLayoutEffect(() => {
    inputElementRef.current.focus();
  });

  return <input ref={inputElementRef} type="text" />;
}

Explanation

The above code is the full working code if you don't need the explanation.

Now let's discuss it each step by step,

First, let's import the useRef and the useLayoutEffect hook from the react. We will discuss why we are using these hooks in a minute and also make a functional component called InputTag.

// Import useRef and useLayoutEffect hooks
import { useRef, useLayoutEffect } from "react";

export default function InputTag() {}

Now we can write the JSX (the rendering part) for the input tag element so that we can render the input tag.

// Import useRef and useLayoutEffect hooks
import { useRef, useLayoutEffect } from "react";

export default function InputTag() {
  // Input tag element
  return <input type="text" />;
}

Now we need to get a reference to the input tag using the useRef hook and passing the reference value of the useRef hook to the input tag's ref attribute like this,

// Import useRef and useLayoutEffect hooks
import { useRef, useLayoutEffect } from "react";

export default function InputTag() {
  // First Get Reference to the Input element in the DOM
  const inputElementRef = useRef();

  return <input ref={inputElementRef} type="text" />; // Input tag element
}

This is how we get a direct reference to a DOM element in React.

Since we got the reference to the input tag element, now we need to use the focus() method to automatically focus the element when the page is rendered to the screen.

All the referenced DOM elements using the useRef hook will have a property called current in which we have the full properties and method of that particular DOM element. So in our case the focus() method of the input tag element can be accessed in the inputElementRef.current.focus().

We need to call the focus() method inside the useLayoutEffect hook.

This is because the useLayoutEffect hook runs after every state changes, DOM elements are referenced by React, and just before everything is rendered to the screen.

So just before everything is ready to be rendered to the screen the useLayoutEffect hooks are run.

It can be done like this,

// Import useRef and useLayoutEffect hooks
import { useRef, useLayoutEffect } from "react";

export default function InputTag() {
  // First Get Reference to the Input element in the DOM
  const inputElementRef = useRef();

  // Now We can focus the element
  // inside the useLayoutEffect hook
  useLayoutEffect(() => {
    inputElementRef.current.focus();
  });

  return <input ref={inputElementRef} type="text" />; // Input tag element
}

Now the input tag will be focused on render.

That's all! 😃

See the above code live in Codesandbox.

Feel free to share if you found this useful 😃.

---