useRef Hook: The Silent Helper

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:

• GitHub
• LinkedIn
• Website