How to set focus on an input field after rendering?

javascript

react-hooks

focus-management

component-refs

byAlex Kataev·Feb 21, 2025

Easily focus on an input field using useEffect() and useRef() in React:

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

function AutoFocusInput() {
  const inputRef = useRef(null); 

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

  // Because who needs a mouse click, right?
  return <input ref={inputRef} />;
}

This simple script leverages useRef to specify a reference, and useEffect to put the cursor in the input field when the component renders.

Navigating the `autoFocus` prop

Adding a dollop of autoFocus prop to static elements keeps things simple:

function InputWithAutoFocus() {
  return <input autoFocus />;
}

Just remember: autoFocus does its thing when the component first mounts. Use sparingly to avoid messing with user navigation.

Going deeper into focus handling

Mastering focus with power techniques

Commanding class components with refs

For more control or for class components, createRef comes to the rescue:

import React, { Component, createRef } from 'react';

class ClassComponentWithFocus extends Component {
  constructor(props) {
    super(props);
    this.inputRef = createRef();
  }

  componentDidMount() {
    this.inputRef.current.focus(); // It's focus o'clock!
  }

  render() {
    return <input ref={this.inputRef} />;
  }
}

Make sure you give the ref to the right element.

Accessing DOM directly with ref callbacks

To apply focus in a single line, skip useRef with an inline callback:

function DirectFocusInput() {
  return <input ref={input => input && input.focus()} />; // Ni hao, focus!
}

Pairing `defaultValue` with refs

When working with controlled components, defaultValue and refs go along like bread and butter. It allows value setting without triggering a re-render:

function ControlledInputWithFocus() {
  const inputRef = useRef(null); 

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

  // Chill, we're in control now!
  return <input ref={inputRef} defaultValue="Initial Value" />;
}

Taking dynamic focus and reusability to next level

Custom hooks for reusable focus

Custom hooks keep things DRY and your focus management sane:

import { useEffect, useRef } from 'react';

// A Jedi uses the Focus, for knowledge and defense.
function useFocus() {
  const elementRef = useRef(null);
  const setFocus = () => {elementRef.current &&htmlElRef.current.focus(); };

  return [elementRef, setFocus];
}

Now, bring in your custom hook into components for reusable focus patterns.

Event-driven focus management

Sometimes, we want to focus only on a certain event:

function InputWithEventFocus() {
  const inputRef = useRef(null);
  const setFocus = () => inputRef.current.focus();

  // Focus, you must!
  return (
    <div>
      <input ref={inputRef} />
      <button onClick={setFocus}>Focus the input</button>
    </div>
  );
}