useRef in React — Why It Exists and How to Use It Simply

Hey!

Let me ask you something.

You have an input field in React. When the page loads — you want the cursor to automatically focus on that input. So the user can start typing right away without clicking it first.

How do you do that?

In plain JavaScript it is simple.

document.getElementById("myInput").focus();

But in React — you do not touch the DOM directly like that. React manages the DOM for you.

So how do you access a real DOM element in React?

That is exactly what useRef is for.

1. What Is useRef?

useRef is a React hook that gives you a way to directly access a DOM element or store a value that does not cause a re-render when it changes.

It returns an object with one property — current.

const myRef = useRef(null);

// myRef looks like this:
// { current: null }

When you attach it to a DOM element — current holds that element. You can then do anything you would normally do with a DOM element.

Think of it like putting a sticky note on a specific element in your app. Whenever you need that element — you check the sticky note and find it instantly.

2. The Problem Without useRef

Let us say you want to focus an input when the page loads.

Without useRef — you might try this:

function SearchPage() {
  document.getElementById("search").focus(); // too early — element not ready yet

  return <input id="search" type="text" placeholder="Search..." />;
}

This does not work.

When this line runs — the input is not in the DOM yet. React has not rendered it. So getElementById returns null and .focus() crashes.

useRef solves this cleanly.

3. The Syntax

import { useRef } from "react";

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

  return <input ref={inputRef} type="text" />;
}

useRef(null) — creates a ref with current set to null at first.

ref={inputRef} — you attach it to the element. Once React renders the input — inputRef.current points to that real DOM element.

Now you can call any DOM method on it — .focus(), .blur(), .scrollIntoView().

4. Example 1 — Auto Focus Input

import { useRef, useEffect } from "react";

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

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

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Search..." />
    </div>
  );
}

What happens here:

Page loads
  → React renders the input
  → useEffect runs once
  → inputRef.current is now the real input element
  → .focus() puts the cursor there automatically

The user lands on the page. Cursor is already in the input. Ready to type.

Quick question for you.

Why do we put .focus() inside useEffect and not directly in the component body?

Because the component body runs before React renders anything to the screen. The input does not exist yet at that point. useEffect runs after the render — so the element is there and ready.

5. Example 2 — Store a Value Without Re-Rendering

This is the second use of useRef — and it surprises most beginners.

useRef can also store any value — not just DOM elements. And when that value changes — the component does not re-render.

That is the key difference from useState.

import { useRef, useState } from "react";

function Timer() {
  const [isRunning, setIsRunning] = useState(false);
  const intervalRef = useRef(null);

  function start() {
    setIsRunning(true);
    intervalRef.current = setInterval(() => {
      console.log("tick");
    }, 1000);
  }

  function stop() {
    setIsRunning(false);
    clearInterval(intervalRef.current);
  }

  return (
    <div>
      <p>{isRunning ? "Running..." : "Stopped"}</p>
      <button onClick={start}>Start</button>
      <button onClick={stop}>Stop</button>
    </div>
  );
}

intervalRef stores the timer ID from setInterval.

When you click Stop — intervalRef.current gives you that ID and clearInterval stops the timer.

Quick question for you.

Why not use useState to store the interval ID instead of useRef?

Because updating state causes a re-render. You do not need the screen to update when the interval ID changes — you just need to remember it so you can clear it later. useRef stores it silently. No re-render. No side effects.

6. useRef vs useState — The Key Difference

This is the thing that confuses most beginners.

Both store values. But they behave very differently.

Simple rule.

If changing the value should update what the user sees — use useState.

If you just need to remember something quietly in the background — use useRef.

7. One Common Mistake

Reading ref.current too early — before React has rendered the element.

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

  console.log(inputRef.current); // null — element not rendered yet

  useEffect(() => {
    console.log(inputRef.current); // the real input element — safe to use here
  }, []);

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

Always access ref.current inside useEffect or inside an event handler — never directly in the component body.

By the time useEffect runs or a user clicks a button — React has already rendered the element. It is safe.

Quick Summary — 4 Things to Remember

1. useRef gives you access to DOM elements — attach it with the ref prop and use ref.current to call DOM methods like .focus().

2. useRef stores values without re-rendering — perfect for storing timer IDs, previous values, or anything you need to remember but not show on screen.

3. ref.current starts as null — it only gets the real element after React renders it. Always access it inside useEffect or event handlers.

4. useRef vs useState — useState triggers re-renders and updates the UI. useRef stores silently. Use the right one for the right job.

useRef is one of those hooks that feels unnecessary at first — until you need to focus an input or stop a timer and you realise it is the cleanest way to do it.

Try the auto focus example. Build it. Load the page. See the cursor land in the input automatically. Then try the timer. Start it. Stop it. See how the interval ID is stored and cleared cleanly.

That hands-on time will make it stick.

If you have a question — drop it in the comments below.

Thanks for reading. Keep building.