Topic

Manipulating the DOM with refs

Definition

DOM refs provide imperative access to a rendered DOM element for focused integration work such as focus, scroll, or measurement.

In simpler words

Most UI should be declarative, but a ref is the right bridge when the browser API needs the real element.

Ref assignment, focus management, and avoiding DOM conflicts.

Open official example (opens in new tab)

After this you can

Focus an input or scroll to an important result accessibly.
Explain the trade-off to a teammate using a small example.
Name at least one common bug pattern for this topic.

Understand Manipulating the DOM with refs

Ref assignment, focus management, and avoiding DOM conflicts.

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.

Manipulating the DOM with refs in code

const inputRef = useRef<HTMLInputElement>(null);
<button onClick={() => inputRef.current?.focus()}>Focus</button>;

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

Apply Manipulating the DOM 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: Write display text via ref

// Wrong
ref.current!.textContent = title;

// Right
return <p ref={ref}>{title}</p>;

Declare UI from state; refs are for imperative browser APIs.

Mistake: focus() every render

// Wrong
function Field() {
  const ref = useRef(null);
  ref.current?.focus();
  return <input ref={ref} />;
}

// Right
useEffect(() => { ref.current?.focus(); }, []);
// or on user action

Unconditional focus fights the user and accessibility.

Mistake: Stale DOM node after unmount

// Wrong
// keep element reference in a module variable

// Right
// read ref.current only while mounted; null on cleanup if needed

Do not use DOM nodes after unmount.

Live playground

Manipulating the DOM with refs sandbox

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

Focus target

inputRef.current?.focus()

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. How do you focus an input on mount?

Concept

ref.current?.focus() called directly in the render bodyconst ref=useRef(null); useEffect(()=>ref.current?.focus(),[])document.getElementById(id).focus() during renderconst ref=useRef(null); ref.current.focus() with no effect

2. Attach ref to element?

Syntax

<input ref={inputRef} /><input ref="inputRef" /> string ref modern app<input useRef={inputRef} /><input current={inputRef} />

3. Why prefer refs over querySelector in React?

Practical

Refs point at elements React owns; avoid brittle selectorsquerySelector cannot find elements React renderedquerySelector only works after the effect cleanup phaseRefs automatically re-query the DOM on every render

4. Scroll into view?

Logic

window.scrollTo() with hardcoded pixel offsetsref.scrollIntoView() reading ref without .currentref.current?.scrollIntoView()document.querySelector(sel).scrollIntoView() during render

5. Callback refs use case?

Concept

Re-run the component whenever the node changes sizeHold the previous render’s value like a plain refRun logic when node attaches/detachesFetch data each time the referenced node re-renders

6. Measuring layout?

Practical

Read getBoundingClientRect during render before commitMeasure inside useMemo so it recomputes on resizeref + ResizeObserver/getBoundingClientRect carefully after commitStore dimensions in a ref and read them during render

7. Third-party chart needs a DOM node?

Syntax

Instantiate the chart during render with ref.currentPass the ref object itself instead of ref.currentGive it a querySelector result found during renderGive it ref.current in an effect; destroy on cleanup

8. Don’t manipulate DOM that React also controls how?

Logic

Set innerHTML on a node React also renders children intoManually remove a child React still tracks in its treeAvoid conflicting updates on the same nodes React rendersReorder React-rendered nodes with appendChild by hand

9. ref on a function component?

Concept

Works automatically and points at the root DOM nodeNeeds useImperativeHandle alone, without forwardRefJust add the reserved ref prop and it forwards itselfNeeds forwardRef (or props callback) to expose a node/handle

10. Which is best practice?

Practical

Render all dynamic content by writing ref.current.innerHTMLUse refs for focused DOM operations; keep UI data in stateAvoid refs entirely and use querySelector for DOM accessKeep UI data in refs and use state only for DOM nodes

11. What does this component do on mount?

Conceptintermediate

const inputRef = useRef(null);
useEffect(() => { inputRef.current?.focus(); }, []);
return <input ref={inputRef} />;

Focuses before renderFocuses only on clickFocuses the input after it is committed to the DOMNothing — refs can’t focus

12. Why does inputRef.current stay null here?

Syntaxadvanced

const Fancy = (props) => <input {...props} />;
// parent: <Fancy ref={inputRef} />

ref only works on class componentsYou must use useImperativeHandle onlyFunction components need forwardRef to expose a DOM nodeThe input needs an id

13. What is a valid reason to use a ref here?

Practicalintermediate

endRef.current?.scrollIntoView({ behavior: 'smooth' });

To store component stateTo fetch from NestTo call an imperative DOM API on a specific element React renderedTo replace CSS scroll-behavior entirely

14. What is wrong with this render body?

Logicadvanced

function Widget() {
  document.querySelector('.title').textContent = 'Hi';
  return <h1 className="title">...</h1>;
}

querySelector is banned in browserstextContent is read-onlyIt mutates the DOM during render and fights React; use a ref in an effecth1 cannot have a class

15. Why return chart.destroy() from this effect?

Conceptintermediate

useEffect(() => {
  const chart = new Chart(ref.current);
  return () => chart.destroy();
}, []);

To re-render the chartTo clean up the library instance on unmount and avoid leaksTo focus the canvasIt is optional and does nothing

Checking your session…