ReactJS How to focus input element on render| useRef and useEffect example

This post talks about how to set focus on the input element in Form validation in Reactjs.

Adding Input focus to the input elements on UI forms makes validation easy and controls input elements via the keyboard tab.

focus input element using ref in react class components

ref and createRef in ReactJS provides an access-specific DOM element in stateful components. These are also called Class components

Using this provides focus control to input elements.

  • Create input element, add ref directive
  • Initialize the input ref in Constructor using React.createRef()
  • ComponentDidMount is a callback called after component is mounted.
  • Access the element using this.inputRef.current, call focus() method

Complete component code:

import React, { Component } from 'react';

class InputFocusComponent extends Component {
    constructor(props) {
        this.inputRef = React.createRef();

    componentDidMount() {

    render() {
        return (
                <label>Enter Name</label>
                <input type="text" ref={this.inputRef} />


export default InputFocusComponent;

focus input element using ref in react class components

useEffect, useRef are hooks in reactjs to access DOM elements in functional components. These also called stateless components.

useRef hook with an initial value, return a mutable ref to DOM elements useEffect hook in react equivalent to ComonentDidMount called once component is mounted. set focus to the input element in use effect function Added ref to input attribute.

Example Functional component to set focus control on the input element in react.

import React, { useEffect, useRef } from 'react';

const InputFocusUseHook = () => {
    const inputRef = useRef(null);
    useEffect(() => inputRef.current && inputRef.current.focus());

    return (
            <label>Enter Name</label>
            <input type="text" ref={inputRef} />


export default InputFocusUseHook;


This post covers setting focus on input element in ReactJS

  • ref and CreateRef accessing DOM
  • useRef and useEffect hooks
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
You'll get a notification every time a post gets published here.

Related posts

Basic React Interview questions and answers

Best ways to add an element to an array in React state with examples

Difference between Development and Production Builds in React

Difference between pureComponent and component in React

Difference between super and super props in React constructor class?

Fixing an error You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) in React

Getting started with ReactJS Bootstrap Tutorials with examples | reactstrap tutorials