Topic

Referencing values with refs

Definition

A ref is a mutable object whose current property persists between renders without causing a re-render when changed.

In simpler words

Use refs for values React does not need to display, such as timer IDs or a DOM node handle.

useRef, mutable current, and state versus refs.

Open official example (opens in new tab)

After this you can

Keep non-visual values without triggering UI updates.
Explain the trade-off to a teammate using a small example.
Name at least one common bug pattern for this topic.

Understand Referencing values with refs

useRef, mutable current, and state versus refs.

Start by identifying which value or browser behavior changes. Then describe the UI from that current input instead of editing the DOM as a separate source of truth.

Referencing values with refs in code

const timerRef = useRef<number | null>(null);
timerRef.current = window.setTimeout(save, 500);

Read the example from data and control flow to the resulting UI. Keep the component boundary small.

Apply Referencing values with refs

Keep rendering as a calculation. Put user-triggered changes in event handlers, preserve UI memory in state, and reserve external synchronization for Effects or the server-state layer.

Name values by their UI meaning, test the loading and error path when data is remote, and avoid keeping two editable copies of the same value.

Ask before adding code: is this local UI memory, shared client state, or Nest-owned server state?

Where bugs hide

Definition

High-bug areas are places where a small API misuse looks correct but produces stale UI, duplicate work, or silent failures.

In simpler words

Each mistake below shows Wrong vs Right code — compare them side by side.

When something misbehaves, match the symptom to a pattern below before rewriting the feature.

Prefer fixing the ownership or update path over adding another Effect or sync step.

Mistake: Drive UI from ref.current in render

// Wrong
const n = useRef(0);
return <p>{n.current}</p>; // won't update on n.current++

// Right
const [n, setN] = useState(0);
return <p>{n}</p>;

Visible values need state.

Mistake: Expect ref writes to re-render

// Wrong
ref.current += 1; // screen unchanged

// Right
setCount(c => c + 1);

Refs skip re-render by design.

Mistake: Server data only in a ref

// Wrong
const cache = useRef([]);
cache.current = await list();

// Right
useQuery({ queryKey: ["tickets"], queryFn: list })

Refs are not a persistence or server cache layer.

Live playground

Referencing values with refs sandbox

Change one input at a time and predict the next render.

ref.current = 0 · renders = 0

const clicks = useRef(0);

Keep in mind

Keep the formal definition in mind; it explains which tool belongs where.
Prefer one source of truth over synchronized copies of the same value.
When behavior surprises you, trace: input → update → render → committed UI.
Study the Wrong vs Right examples in “Where bugs hide” before you merge.

Test

Check your understanding

At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥80% (enforced by the API) to save progress.

Checking your session…

15 questions · concept 5 · syntax 3 · practical 4 · logic 3

1. What is a ref?

Concept

A state value that re-renders only when ref.current changesA prop React passes automatically to every elementA mutable box (ref.current) that persists across renders without re-rendering on changeA snapshot of state frozen at the first render

2. useRef initial value?

Syntax

useRef(initial) returns initial directly, not an objectuseRef returns [current, setCurrent] like useStateuseRef ignores its argument and starts at nulluseRef(initial) returns { current: initial }

3. When use ref vs state?

Practical

When the value is rendered on screen as primary UI dataWhen changing the value should not re-render (timers, DOM nodes, latest handlers)Whenever you want fewer re-renders on displayed textFor any value that changes more than once per second

4. Reading ref during render for display?

Logic

Usually prefer state for displayed valuesReading ref.current in render is fine for live textRefs re-render on read, so the display stays currentReading a ref in render throws in Strict Mode

5. Storing previous value pattern?

Concept

Store the previous value in state and update it in renderCompute the previous value with useMemo on the current oneRef updated in effect; read previous on next renderRead the previous value from the DOM before it repaints

6. Does updating ref.current re-render?

Practical

Yes, on the next render after the changeNoYes, but only in development modeOnly if the ref holds an object

7. Refs in lists?

Syntax

A single useRef automatically spreads across all itemsRefs on list items must use the item index as the keyEach item shares the parent’s single ref objectEach item can hold a ref via callback refs or maps carefully

8. Avoid replacing useState with refs for form text?

Logic

Because typing won’t re-render controlled UIBecause refs can only hold DOM nodes, not stringsBecause ref.current resets to empty on every renderBecause refs re-render too often while typing

9. Keep latest callback in a ref?

Concept

Yes — common to avoid stale closures in effectsNo — callbacks must be recreated with useCallback insteadOnly if the callback is wrapped in useMemo firstNo — storing functions in refs breaks the rules of hooks

10. Which statement is true?

Practical

ref.current is reset to its initial value on every renderref.current is read-only after the first renderref.current is mutable and durable for the component lifetimeref.current triggers a re-render whenever it is read

11. What happens on screen when you click?

Conceptintermediate

const ref = useRef(0);
function onClick() {
  ref.current += 1;
  console.log(ref.current);
}

The UI shows the new countNothing visually — updating ref.current does not trigger a re-renderIt throws because refs are immutableIt re-renders once per click

12. Why is a ref the wrong choice to display live text?

Syntaxadvanced

const inputRef = useRef('');
return <p>{inputRef.current}</p>;

Refs cannot hold stringsChanging it won’t re-render, so the <p> won’t update; use stateRefs are only for DOM nodesIt updates on every keystroke

13. Why store the interval id in a ref instead of state?

Practicalintermediate

const timer = useRef(null);
function start() { timer.current = setInterval(tick, 1000); }
function stop() { clearInterval(timer.current); }

It must persist across renders but should not trigger re-renderssetInterval requires refsState cannot hold numbersRefs run faster timers

14. What does prev.current hold during render?

Logicadvanced

const prev = useRef(count);
useEffect(() => { prev.current = count; }, [count]);

The current countThe count value from the previous renderAlways the initial countundefined forever

15. Why keep the latest callback in a ref?

Conceptintermediate

const cbRef = useRef(onChange);
useEffect(() => { cbRef.current = onChange; });

To call the newest handler from a long-lived effect without re-subscribingCallbacks cannot be propsTo trigger re-rendersTo store JSX

Checking your session…