`useRef` can hold mutable information that needs to survive across renders but should not cause a component to re-render when it changes. This is different from state, which represents data that affects rendering. ### Example: Keeping a Previous Value ```jsx import { useEffect, useRef, useState } from "react"; function Counter() { const [count, setCount] = useState(0); const previousCountRef = useRef(count); useEffect(() => { previousCountRef.current = count; }, [count]); return (

Current: {count}

Previous: {previousCountRef.current}

); } ``` The ref survives between renders and can remember information independently from state. ### Example: Preventing Duplicate Actions Suppose an operation should not start twice at the same time: ```jsx function CheckoutButton() { const submittingRef = useRef(false); async function handleCheckout() { if (submittingRef.current) { return; } submittingRef.current = true; try { await submitOrder(); } finally { submittingRef.current = false; } } return ( ); } ``` Here the mutable flag is needed by event logic, but this particular example does not require its changes to appear in the UI. If the button should visually become disabled while submitting, state would also be needed: ```jsx const [submitting, setSubmitting] = useState(false); ``` ### Ref Values Are Mutable This is allowed: ```javascript ref.current = newValue; ``` because refs are designed as mutable containers. Compare that with state: ```jsx const [user, setUser] = useState(...); ``` where you should use the setter rather than directly replacing the state variable. ### When Should a Mutable Value Use a Ref? A ref is appropriate when the value: ```text Must survive between renders Does not need to render on screen Is used by event handlers or Effects Represents an imperative resource or identifier ``` Typical examples include: ```text Timer IDs AbortController instances DOM elements Previous values Third-party library instances Mutable flags used by logic ``` ### Refs Are Not a Replacement for State Ask: ```text If this value changes, should the visible UI change? ``` If yes: ```text → state ``` If no, but the value must survive renders: ```text → ref may be appropriate ``` ### Interview-Ready Answer `useRef` can store mutable values between renders without triggering a render when `ref.current` changes. This makes refs suitable for timer IDs, previous values, DOM nodes, external instances, and mutable values used only by event or Effect logic. Refs should not replace state when a value affects what the user sees.