Refs, DOM Access & Imperative Escape Hatches

Use Refs, DOM Access & Imperative Escape Hatches as an escape hatch for synchronizing with a system outside React. Verify setup/cleanup symmetry, dependency correctness, race cancellation, and repeated setup in Strict Mode.

Build a Complete Mental Model

Use Refs, DOM Access & Imperative Escape Hatches as an escape hatch for synchronizing with a system outside React. Verify setup/cleanup symmetry, dependency correctness, race cancellation, and repeated setup in Strict Mode.

Apply It in Production React

Test an original Refs, DOM Access & Imperative Escape Hatches example with empty/loading/error states, keyboard-only interaction, a slow network, rapid repeated events, and component unmount/remount cases. Verify behavior with the browser console, React DevTools, tests, and profiler where relevant.

After This Lesson

• Explain the source of truth and component boundary
• Build an example with keyboard and failure states
• Verify one user-visible behavior with a test or profiler

import { useRef } from 'react';

export default function SearchBox() {
  const inputRef = useRef(null);
  return <>
    <input ref={inputRef} aria-label="Search tasks" />
    <button onClick={() => inputRef.current?.focus()}>Focus search</button>
  </>;
}

The button moves keyboard focus to the search input.

Manipulating the DOM with Refs — React