How to Use ref with Input in React: Simple Guide

In React, use useRef to create a reference and attach it to an input element via the ref attribute. This lets you access or manipulate the input directly without state, for example to focus or read its value.

Syntax

To use a ref with an input in React, first create a ref using useRef(). Then assign it to the input's ref attribute. You can access the input element via ref.current.

• useRef(): Creates a ref object.
• ref attribute: Connects the ref to the input element.
• ref.current: Points to the actual DOM input element.

jsx

import React, { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null); // Create ref

  function handleClick() {
    inputRef.current.focus(); // Access input element
  }

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus Input</button>
    </>
  );
}

Example

This example shows how to focus an input when a button is clicked using a ref. The useRef hook creates a ref, which is attached to the input. Clicking the button calls a function that uses ref.current.focus() to put the cursor inside the input.

jsx

import React, { useRef } from 'react';

export default function FocusInput() {
  const inputRef = useRef(null);

  const focusInput = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Click button to focus" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

Output

An input box and a button labeled 'Focus Input'. Clicking the button moves the cursor inside the input box.

Common Pitfalls

Common mistakes when using refs with inputs include:

• Not initializing the ref with null, which can cause errors.
• Trying to access ref.current before the component mounts, leading to null errors.
• Using refs to manage input values instead of state, which can cause UI inconsistencies.
• Forgetting to check if ref.current exists before using it.

Refs are best for direct DOM actions like focusing, not for controlling input values.

jsx

import React, { useRef } from 'react';

function WrongExample() {
  const inputRef = useRef(null); // Initialize with null

  function handleClick() {
    // This might cause error if ref.current is undefined
    inputRef.current.focus();
  }

  return <input ref={inputRef} />;
}

// Correct way:

function RightExample() {
  const inputRef = useRef(null); // Initialize with null

  function handleClick() {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }

  return <input ref={inputRef} />;
}

Quick Reference

Ref with Input Cheat Sheet:

• const ref = useRef(null); — create a ref
• <input ref={ref} /> — attach ref to input
• ref.current.focus() — focus input
• Check ref.current exists before using
• Use refs for DOM access, not for input value control

Key Takeaways

Use useRef(null) to create a ref and attach it to an input's ref attribute.

Access the input element with ref.current to call DOM methods like focus().

Always check if ref.current exists before using it to avoid errors.

Refs are for direct DOM manipulation, not for managing input values.

Initialize refs with null to prevent undefined errors.