Refs and DOM Access

Refs: The Escape Hatch

React is declarative — you describe what the UI should look like, and React handles the DOM. But sometimes you need direct DOM access: focusing an input, measuring an element, integrating with a non-React library. Refs are React's escape hatch for these cases.

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

  useEffect(() => {
    inputRef.current.focus(); // Direct DOM API call
  }, []);

  return <input ref={inputRef} placeholder="Search..." />;
}

useRef: Two Distinct Use Cases

1. DOM Element References

function VideoPlayer({ src }) {
  const videoRef = useRef(null);

  function handlePlay() {
    videoRef.current.play(); // Imperative DOM API
  }

  function handlePause() {
    videoRef.current.pause();
  }

  return (
    <div>
      <video ref={videoRef} src={src} />
      <button onClick={handlePlay}>Play</button>
      <button onClick={handlePause}>Pause</button>
    </div>
  );
}

When React mounts the <video> element, it sets videoRef.current to the DOM node. On unmount, it sets it back to null.

2. Mutable Instance Variables

function Timer() {
  const [seconds, setSeconds] = useState(0);
  const intervalRef = useRef(null);

  function start() {
    if (intervalRef.current) return; // Prevent double-start
    intervalRef.current = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);
  }

  function stop() {
    clearInterval(intervalRef.current);
    intervalRef.current = null;
  }

  useEffect(() => {
    return () => clearInterval(intervalRef.current); // Cleanup on unmount
  }, []);

  return (
    <div>
      <span>{seconds}s</span>
      <button onClick={start}>Start</button>
      <button onClick={stop}>Stop</button>
    </div>
  );
}

The interval ID is stored in a ref because:

• It does not affect rendering (no visual change when the ID changes)
• It needs to persist across renders (state would work but triggers unnecessary re-renders)
• It needs to be mutable (stop needs to read the current ID set by start)

Ref vs State: The Decision

forwardRef: Passing Refs to Child Components

Custom components do not accept ref directly. You need forwardRef:

const FancyInput = forwardRef(function FancyInput(props, ref) {
  return (
    <input
      ref={ref}
      className="fancy-input"
      {...props}
    />
  );
});

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

  useEffect(() => {
    inputRef.current.focus(); // Works — ref forwarded to <input>
  }, []);

  return <FancyInput ref={inputRef} placeholder="Name" />;
}

// React 19 — ref is just a prop
function FancyInput({ ref, ...props }) {
  return <input ref={ref} className="fancy-input" {...props} />;
}

// Usage is the same:
<FancyInput ref={inputRef} />

Callback Refs: Dynamic DOM Measurement

When you need to run code the moment a DOM node is attached or detached, use a callback ref:

function MeasuredBox() {
  const [height, setHeight] = useState(0);

  const measuredRef = useCallback((node) => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  }, []);

  return (
    <div>
      <div ref={measuredRef}>
        <p>Content that determines height</p>
      </div>
      <p>Height: {height}px</p>
    </div>
  );
}

Callback refs fire when the DOM node is attached (argument is the node) and when detached (argument is null). Unlike useRef + useEffect, callback refs work immediately — even for conditionally rendered elements.

Production Scenario: Focus Management in a Modal

function Modal({ isOpen, onClose, children }) {
  const closeButtonRef = useRef(null);
  const previousFocusRef = useRef(null);

  useEffect(() => {
    if (isOpen) {
      // Store the previously focused element
      previousFocusRef.current = document.activeElement;
      // Focus the close button inside the modal
      closeButtonRef.current?.focus();
    }

    return () => {
      // Restore focus when modal closes
      previousFocusRef.current?.focus();
    };
  }, [isOpen]);

  if (!isOpen) return null;

  return (
    <div className="modal-overlay" role="dialog" aria-modal="true">
      <div className="modal-content">
        <button
          ref={closeButtonRef}
          onClick={onClose}
          aria-label="Close modal"
        >
          X
        </button>
        {children}
      </div>
    </div>
  );
}

Challenge: Build a Click-Outside Hook

Click Outside Detection