useRef Hook

Introduction

Not every value a component needs to remember should cause a re-render when it changes. A timer ID, the previous value of a prop, or a direct reference to a DOM node are all things you want to keep around between renders, but updating them should not, by itself, trigger React to re-render the component. This is exactly the gap useRef fills.

This lesson covers what useRef actually returns, its most common use — grabbing a direct reference to a DOM element such as an input to call .focus() on it — using it to store any mutable value across renders, and a clear comparison between useRef and useState so you know exactly which one to reach for.

What Is useRef?

useRef(initialValue) returns a plain, mutable object with a single property: .current, set initially to whatever value you passed in. That object is the exact same object on every render — React creates it once, on the first render, and hands back the identical reference every time afterward.

import { useRef } from 'react';

function Example() {
  const renderCountRef = useRef(0);

  renderCountRef.current = renderCountRef.current + 1;

  return <p>This component has rendered {renderCountRef.current} times (not counted via state)</p>;
}

Accessing DOM Elements

The most common use of useRef is getting direct access to a real DOM element — something React normally abstracts away. You create a ref, attach it to a JSX element's ref attribute, and React automatically sets ref.current to that actual DOM node once it is rendered.

import { useRef } from 'react';

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

  function handleFocusClick() {
    inputRef.current.focus(); // directly calls the real DOM input's .focus()
  }

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

Clicking "Focus the Input" moves the text cursor directly into the input field, exactly like calling document.querySelector("input").focus() — but without ever touching the DOM manually.

Storing Mutable Values

Beyond DOM access, useRef is also the standard way to store any value that needs to persist across renders but should never, by itself, cause a re-render — a setInterval ID so it can be cleared later, the previous value of a prop for comparison, or a flag tracking whether a component has already mounted.

import { useState, useRef } from 'react';

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

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

  function stop() {
    setIsRunning(false);
    clearInterval(intervalIdRef.current); // read the stored ID to clear it
  }

  return (
    <button onClick={isRunning ? stop : start}>
      {isRunning ? 'Stop' : 'Start'}
    </button>
  );
}

Storing the interval ID in state would work too, but it would trigger an unnecessary re-render every time it changed — and the component does not actually need to display that ID anywhere. A ref is the right tool because nothing in the UI depends on its value.

useRef vs useState

Both Hooks persist a value between renders, which is exactly why they are so often confused. The difference comes down to one question: should updating this value cause the UI to update too?

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

useRef fills an important gap that useState cannot: a place to keep a mutable value alive across renders without paying the cost of a re-render every time it changes. Whether you are focusing an input, tracking a timer ID, or remembering a previous value, useRef is the right tool whenever the UI itself does not need to reflect that value directly.

Next, you will learn useMemo — a Hook that lets you skip re-running expensive calculations on every render by memoizing their results.