useRef is a hook that gives you a way to persist values across renders without triggering re-renders.

It's like storing a value you can access at any point — but React won’t re-render when that value changes.

Why Use useRef?

You should use useRef when you need to:

  • Store data that shouldn’t cause a re-render (e.g., timer ID, previous value)
  • Access or manipulate DOM elements directly (like focusing an input or scrolling)

How Does useRef Work?

When you use useRef, you get an object with a .current property that holds your value.

It’s like a hidden box React ignores during re-renders — perfect for non-UI logic.

const myRef = useRef(initialValue);
  • initialValue: The starting value to store
  • myRef.current: Access or update this anytime without re-rendering

Example: Storing a Timer ID

Use useRef to store a timer ID without triggering a re-render.

const timerRef = useRef(null);

const startTimer = () => {
  timerRef.current = setInterval(() => console.log("Tick..."), 1000);
};

const stopTimer = () => {
  clearInterval(timerRef.current);
};

Example: Focusing an Input Field

Use useRef to control a DOM element — like focusing an input — without re-rendering.

const inputRef = useRef(null);

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

return (
  <>
    <input ref={inputRef} />
    <button onClick={focusInput}>Focusbutton>
  >
);

When Not to Use useRef

Don’t reach for useRef in every situation. It’s not always the right fit:

  • Need UI to react to value change? → Use useState
  • Need side effects or tracking changes? → Use useEffect or useMemo

useRef is great for holding values silently, but it's not reactive.

Real-World Use Case

You're building a form and want to auto-focus the first input that’s empty.

You don’t want to trigger a re-render — just focus it once on load.

useRef is perfect here.

Other use cases:

  • Storing debounce or interval IDs
  • Holding scroll position
  • Keeping a reference to video/audio players

Try It Yourself!

Challenge:

Create a countdown timer that starts and stops using useRef.

Hint:

  • Use setInterval() and clearInterval()
  • Store the interval ID using useRef

Let’s Connect

If you found this helpful, check out my other posts on React hooks like useEffect, useState, and more.

I’m sharing beginner-friendly content to help you build a solid foundation — step by step.

You can also find me here: