React Mastery / React Hooks

useRef Hook

❓What is useRef?

The useRef hook in React is a versatile and powerful tool primarily used to persist values across component renders and to directly reference and manipulate DOM elements without causing re-renders.

  • useRef returns a mutable reference object whose .current property holds a value that remains consistent across the lifetime of the component.

  • It is mainly used for:

    • Accessing DOM elements directly, such as focusing an input or altering styles.

    • Storing mutable values that you want to persist between renders but don't want to trigger a component re-render when they change.

Characteristics

  • The returned ref object has a shape: { current: initialValue }.

  • The initial value is set once during the first render and ignored in subsequent renders.

  • Changing ref.current does not cause a re-render, unlike updating state.

  • The object returned by useRef is stable — it's the same object on every render.

🧐 Why use useRef instead of state?

  • State changes cause re-rendering of the component, but refs do not.

  • Use useRef to store data that does not need to impact rendering (for example, to store timers, previous values, or mutable variables).

  • Ideal for cases where you want to read or write a value directly, but where UI should not update when it changes.

✅ Common Use Cases of useRef

1. Accessing and manipulating DOM elements

  • Assign useRef to a JSX element's ref prop to get a direct handle on the real DOM node

  • Common for imperative actions React doesn't have a declarative prop for — focusing an input, scrolling to an element, measuring size, playing a video

  • Keeps DOM access inside React's world instead of falling back to document.querySelector

2. Persisting mutable values without causing re-renders

  • A ref's .current can be changed freely and it survives across renders — but changing it never schedules a re-render

  • Good for values the UI doesn't need to reflect immediately: counters for internal bookkeeping, timers/interval IDs, render-cycle counts, flags

  • Trade-off: if you do need the UI to update when the value changes, you want useState, not useRef

3. Preventing an effect from running on the initial mount

  • A ref (e.g. isFirstRender) can act as a one-time flag your effect checks and flips

  • Lets you skip the effect's logic on mount and only run it on genuine updates — useful when the effect should react to changes, not to the component just appearing

4. Storing "stale" data or previous props/state

  • Update a ref inside an effect to snapshot the current value right after each render commits

  • Since the ref update happens after render, reading .current during the next render gives you the previous value — a simple way to build "before vs. now" comparisons without extra state

✏️ Working with Refs in React

  • Use the ref attribute on any JSX element to attach the ref.

  • React sets the .current property of the ref object to the DOM element after render.

  • When the element unmounts, React updates the ref's .current to null.

  • You can update .current manually for any data you want to persist without rendering.

Summary of Key Points

Aspect

Details

Returned Value

Mutable ref object with .current property

Persistence

Value persists through renders

Causes Re-renders?

No, updating .current does not cause component re-render

Typical Use Cases

Access DOM elements, persist mutable values without rendering

Initial Value Set On

Only on initial render

Changing .current Happens

At any time without affecting the render cycle