useRef — what it is, the ref hook and working with DOM in React

What is useRef in React

useRef is a hook added in React 16.8 that returns a mutable ref object with a single .current property. The initial value is assigned to .current upon component mount. The main difference from a regular variable is that the ref object survives re-renders: on subsequent renders React does not recreate the ref but returns the same object.

Internally, useRef uses the same mechanism as useState and useEffect — a linked list of hooks on the fiber node. However, unlike useState, React does not track ref object changes, does not queue updates and does not schedule re-renders. This makes useRef an extremely lightweight hook with no performance impact even under frequent changes.

According to React Team — Hooks FAQ (2025), useRef is essentially a “box” that holds a value. Syntactic sugar: const ref = useRef(initialValue) is equivalent to const ref = { current: initialValue } with the difference that React guarantees the ref object will be the same on every render. No magic — just a stable reference managed by React.

import { useRef } from 'react';

function Component() {
    const countRef = useRef(0);
    // countRef.current = 0 initially
    // countRef.current = 5 after mutation
    // No re-render happens!
}

Accessing DOM elements with useRef

The most common use case for useRef is obtaining direct access to a DOM element. React assigns elementRef.current a reference to the DOM node after the component mounts. This is necessary for focusing an input, measuring element dimensions, integrating with animation libraries and libraries that do not use React rendering.

React automatically manages DOM ref references: on mount it assigns the actual DOM node, on unmount it nullifies it. This guarantees that .current always holds the up-to-date value and prevents memory leaks through dangling references to removed elements. No manual cleanup is required.

function AutoFocusInput() {
    const inputRef = useRef(null);

    useEffect(() => {
        // Focus input after component mounts
        inputRef.current?.focus();
    }, []);

    return <input ref={inputRef} type="text" />;
}

According to React — Refs and DOM documentation (2025), do not use ref for declarative operations — opening/closing modals, managing visibility. Use state and props for those purposes. Refs are intended for imperative operations that cannot be expressed declaratively: focus, text selection, integration with third-party libraries.

Storing mutable values without re-renders

The second most important use case is storing arbitrary values that need to persist between renders but whose changes should not trigger a re-render. Typical examples: timer identifiers (setInterval/setTimeout), cancellation flags for requests, previous prop values for comparison and any data that does not affect UI output.

This is especially useful in useEffect: useRef stores the timer identifier and the cleanup clears it. If timerId were stored in useState, each setTimerId call would cause an unnecessary re-render that is neither needed for logic nor for UI. useRef solves this problem without overhead and without unnecessary re-renders.

function Timer() {
    const intervalRef = useRef(null);

    const start = () => {
        intervalRef.current = setInterval(() => {
            console.log('tick');
        }, 1000);
    };

    const stop = () => {
        clearInterval(intervalRef.current);
    };

    useEffect(() => stop, []);

    return <><button onClick={start}>Start</button><button onClick={stop}>Stop</button></>;
}

useRef vs useState: when to use what

The main dilemma — choosing between useRef and useState — is resolved by one question: “Is a re-render needed when the value changes?” If yes — useState. If no — useRef. useState stores state that affects component output; useRef stores data needed for internal logic but not affecting the UI.

In practice, developers often use useRef to store callbacks to avoid closure issues. For example, if useEffect subscribes to an event and the callback needs the current state — store the callback in useRef. On each render, update ref.current with a new function, and the effect will always invoke the fresh callback without re-subscribing.

There is an anti-pattern: using useRef for data that is needed in JSX but whose changes should not cause a re-render. This leads to desynchronization — the UI shows old data while ref.current is already new. If the value is displayed in the UI — use useState. If only used internally — useRef.

useRef in combination with useEffect

The useRef + useEffect combination is the standard pattern for tracking previous prop values. Store the previous value in ref, compare with the current value in useEffect and make decisions based on the difference. This is particularly useful in animations when you need to know what the value was before the change.

function PriceDisplay({ price }) {
    const prevPriceRef = useRef(price);

    useEffect(() => {
        const prevPrice = prevPriceRef.current;
        if (price > prevPrice) {
            animateUp();
        } else if (price < prevPrice) {
            animateDown();
        }
        prevPriceRef.current = price;
    }, [price]);

    return <span>${price}</span>;
}

According to React Documentation — Hooks FAQ (2025), this pattern is called the “previous value pattern”. It works because useRef preserves the value between renders, and useEffect runs after the changes are committed. First the DOM is updated with the new price, then useEffect compares it with the previous (still in ref) and updates ref.current to the current value.

Common mistakes with useRef

The most frequent mistake is reading ref.current during the render phase to compute JSX. Since changing ref.current does not trigger a re-render, the component may use a stale value. If .current is involved in UI output — use useState. If you need to synchronize ref and state, use useEffect to update the state from ref.

• Ref in JSX — reading ref.current inside a render function leads to UI and data desynchronization.
• Ref as a useEffect dependency — ref.current should not be in the dependency array; React does not track its changes.
• Forgotten null check — on unmount ref.current becomes null; always check before access.
• Storing functions in ref — update ref.current on every render if using the fresh callback pattern.

// ❌ Don't read ref.current during render for display
function BadComponent() {
    const valRef = useRef(0);
    return <p>{valRef.current}</p>; // will NOT update on mutation
}

// ✅ Use state for display, ref for logic
function GoodComponent() {
    const [val, setVal] = useState(0);
    const valRef = useRef(0);
    return <p>{val}</p>;
}

Another common mistake is using useRef as the only way to store state in a component when the data actually affects the UI. Developers choose useRef to avoid “unnecessary” re-renders, but end up with a UI that does not update. The correct approach: use useState for UI data and useRef only for auxiliary values not involved in rendering.