useRef Hook: The Silent Helper

#react #programming #webdev #beginners

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}>Focus</button>
  </>
);

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:

Top comments (2)

SUNSHINE222025 • Apr 10

Great breakdown of the useRef Hook and its practical applications! It's indeed a versatile tool for persisting values and accessing DOM elements without causing re-renders.
On my macOS setup, I use ServBay to manage various development environments, which simplifies testing React features like useRef across different projects.