React  

Understanding useRef in React: When and How to Use It Effectively

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);
  • The ref.current value persists across renders.
  • Updating ref.current does NOT cause the component to re-render.
  • Often used to reference DOM nodes or store imperative values.

🧰 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

  • Don't use useRef for reactive state. If the UI depends on a value, use useState.
  • Be careful with stale refs. Since refs persist, outdated logic inside effects can lead to bugs.

🧩 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:

  • Access or modify a DOM element directly
  • Store a value that persists across renders but doesn’t affect the UI
  • Avoid performance issues with frequent re-renders

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

Membership not found