Refs

A ref retains a mutable value between renders without triggering a render when it changes. Use it for DOM nodes, timers, and integration objects—not visible state.

Focus a DOM node

01function Search() {
02  const inputRef = useRef<HTMLInputElement>(null);
03  return <><input ref={inputRef} /><button onClick={() => inputRef.current?.focus()}>Focus search</button></>;
04}

React sets current after committing the DOM. Read or write refs in event handlers and effects rather than during rendering.

Store an imperative value

01const timerRef = useRef<number | undefined>(undefined);
02function restart() {
03  window.clearTimeout(timerRef.current);
04  timerRef.current = window.setTimeout(save, 500);
05}

Keep this

Use refs as an escape hatch for non-render values and narrow DOM operations; keep declarative data in props and state.