React useRef Hook Explained for Beginners (Examples)

What is useRef in React? In plain words, useRef is a React hook that gives you a box to keep a value in. The box survives every re-render, and changing what is inside it does not redraw your screen. People mostly use it for two jobs: grabbing an element on the page (like focusing an input) and remembering a value without causing a re-render.

This guide is for absolute beginners. We define each new word, and every example is short enough to copy and run. If you have not met hooks yet, read our guide on React hooks first, then come back.

What is a ref in React?

A ref (short for reference) is a plain object that React keeps for you. It always has one property, called current. You can put anything in current: a number, a string, or a page element.

A hook is a special React function whose name starts with use. It lets a component use React features. useRef is one of these hooks.

import { useRef } from 'react';

function Demo() {
  const countRef = useRef(0);
  console.log(countRef.current); // 0
  return <p>Hello</p>;
}

Line 1 imports the hook. Line 4 creates a ref and starts it with the value 0. Line 5 reads the value from countRef.current. The ref object itself is the same one every time the component runs.

useRef vs useState: what is the difference?

Both remember a value between renders. A render is when React runs your component to draw it on screen. The big difference is what happens when the value changes.

A simple rule: if the user should see the value on screen, use useState. If you only need to remember it behind the scenes, use useRef.

Example 1: focus an input with useRef

The most common use is reaching a page element directly. Here we make a button that puts the cursor inside a text box.

import { useRef } from 'react';

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

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

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

Line 4 makes a ref that starts as null, because the input does not exist yet. On the input, ref={inputRef} tells React: once you create this element, store it in inputRef.current. In handleClick, inputRef.current is the real input element, so we can call the browser method focus() on it. Click the button and the cursor jumps into the box.

Example 2: focus an input when the page loads

You can combine useRef with useEffect, a hook that runs code after the component appears. This focuses the input automatically.

import { useEffect, useRef } from 'react';

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

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

  return <input ref={inputRef} placeholder="Search..." />;
}

The empty array [] on line 8 means the effect runs only once, right after the first render. By then the input exists, so inputRef.current is ready to use.

Example 3: a value that does not cause a re-render

Refs can also hold ordinary values. Let us count how many times a button was clicked without redrawing the page each time.

import { useRef } from 'react';

function ClickCounter() {
  const clicks = useRef(0);

  function handleClick() {
    clicks.current = clicks.current + 1;
    console.log('Clicked ' + clicks.current + ' times');
  }

  return <button onClick={handleClick}>Click me</button>;
}

Each click adds 1 to clicks.current and prints the total in the browser console. The number is remembered, but the screen does not update. If you want to show the count on screen, switch to useState.

Example 4: read a form value with a ref

import { useRef } from 'react';

function NameForm() {
  const nameRef = useRef(null);

  function handleSubmit(event) {
    event.preventDefault();
    alert('Hello, ' + nameRef.current.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input ref={nameRef} type="text" />
      <button type="submit">Say hello</button>
    </form>
  );
}

preventDefault() stops the browser from reloading the page. Then nameRef.current.value reads whatever the user typed. This is called an uncontrolled input, because React does not track each keystroke. For most forms, beginners are better off with controlled inputs using useState.

Common mistakes with useRef

• Forgetting .current. Write inputRef.current.focus(), not inputRef.focus().
• Reading current too early. Before the first render finishes, an element ref is still null.
• Using a ref for data shown on screen. The screen will not update, so use useState.
• Changing refs while rendering. Change them inside event handlers or effects instead.

When should you use useRef?

1. You need to focus, scroll to, or measure an element.
2. You need to remember a value (like a timer ID) that does not affect what is drawn.
3. You want to read an input value once, such as on submit.