Explain the useRef hook in detail

Question

Accepted Answer

**useRef** creates a **mutable container** (an object with a `.current` property) that persists across renders **without causing re-renders** when its value changes. It's one of the most versatile hooks in React. **Think of it like this:** Imagine a sticky note that you attach to a component. You can write any value on it, and even when the component re-renders, the note stays there with whatever you last wrote — but looking at the note doesn't trigger a new render. **Two primary use cases:** **1. DOM Access — get a reference to a DOM element:** ```tsx import { useRef, useEffect } from "react"; function TextInput() { const inputRef = useRef(null); // Focus input on mount useEffect(() => { inputRef.current?.focus(); }, []); return (

); } ``` **2. Storing mutable values — keep values that don't trigger re-renders:** ```tsx function Timer() { const [count, setCount] = useState(0); const intervalRef = useRef(null); const renderCount = useRef(0); // Track render count without re-renders useEffect(() => { renderCount.current += 1; }); // Store interval ID for cleanup const startTimer = () => { intervalRef.current = setInterval(() => { setCount(c => c + 1); }, 1000); }; const stopTimer = () => { if (intervalRef.current) { clearInterval(intervalRef.current); intervalRef.current = null; } }; return (

Count: {count} (Rendered {renderCount.current} times)

); } ``` **Key points:** - **`.current` changes do NOT trigger re-renders** — this is the fundamental difference from useState - The value **persists for the lifetime** of the component (even across re-renders) - Perfect for **timers, subscriptions, previous values, DOM measurements** - Initialized with `useRef(initialValue)` — the argument becomes `.current` **useRef vs useState comparison:** | Feature | useRef | useState | |---------|--------|----------| | Re-render on change | **No** | **Yes** | | Access current value | `.current` | State variable directly | | Best for | DOM refs, timers, mutable data | UI state that should trigger renders | **Common mistakes:** - Using useRef when you **need** a re-render (use useState instead) - Not cleaning up refs in useEffect (causing memory leaks with subscriptions) - Reading `.current` in render — the value is always the value from the **last** render, not the "latest" **Advanced pattern — previous value:** ```tsx function usePrevious(value: T): T | undefined { const ref = useRef(); useEffect(() => { ref.current = value; }); return ref.current; } // Usage function Counter() { const [count, setCount] = useState(0); const prevCount = usePrevious(count); return

Now: {count}, Before: {prevCount}

; } ```

React: Explain the useRef hook in detail