What is useRef and When Should You Use It?

In React, not all data needs to trigger a re-render. That's where useRef comes in. It allows you to persist mutable values across renders without causing re-renders, and it's also your tool for directly accessing DOM elements.

✅ What is useRef?

useRef is a React hook that returns a mutable object with a .current property.

const ref = useRef(initialValue);

🧰 Common Use Cases for useRef

1. Accessing DOM Elements

If you want to manipulate or focus an input element, useRef gives you direct access.

const inputRef = useRef(null);

useEffect(() => {
    inputRef.current.focus(); // Automatically focus on mount
}, []);

return <input ref={inputRef} />;

2. Storing Previous Values

Track the previous state or prop without triggering re-renders.

const prevCount = useRef();

useEffect(() => {
    prevCount.current = count;
}, [count]);

3. Avoiding Re-Renders for Mutable Values

Use useRef to store timers, intervals, or any variable that doesn't affect UI directly.

const timerRef = useRef(null);

4. Preventing Re-Initialization

If you need a value to persist between renders (like a singleton), useRef helps avoid re-initializing.

const idRef = useRef(generateUniqueId());

❓ useRef vs useState: What's the Difference?

Feature useState useRef
Triggers re-render ✅ Yes ❌ No
DOM access ❌ No ✅ Yes
Stores values ✅ Yes ✅ Yes (without UI sync)
Common uses UI state, logic DOM refs, previous values

⚠️ Gotchas to Avoid

🧩 Pro Tip

Use useRef along with useEffect to track values between renders without causing unnecessary UI updates.

✅ Conclusion

Use useRef in React, when you need to:

It’s a powerful, lightweight tool—especially when combined with useEffect or useImperativeHandle.