How to focus input tag element using hooks in Reactjs?
Tags: react
Published: 2021-02-14 00:00:00

---
  title: How to focus input tag element using hooks in Reactjs?
  published: true
  tags: Reactjs
  date: Sun Feb 14 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/focus-input-tag-using-hooks-reactjs
  cover_image: https://melvingeorge.me/_next/static/images/main-0d4fced79c50226b822fbd50f9dad3a1.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/focus-input-tag-using-hooks-reactjs)
  
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

```jsx
// 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`.

```jsx
// 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.

```jsx
// 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,

```jsx
// 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,

```jsx
// 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](https://codesandbox.io/s/focus-input-tag-hooks-reactjs-g3iej?file=/src/App.js).

### Feel free to share if you found this useful 😃.

---