09 — useRef & forwardRef

useRef creates a mutable container that persists across renders without causing re-renders. It's used for DOM access and storing mutable values.

Two Use Cases

1. DOM References

const inputRef = useRef<HTMLInputElement>(null);
// Later: inputRef.current?.focus();

2. Mutable Values (No Re-render)

const renderCount = useRef(0);
renderCount.current++; // doesn't trigger re-render

useRef vs useState

forwardRef

Lets a parent component access a child's DOM element:

const FancyInput = forwardRef<HTMLInputElement, Props>((props, ref) => (
  <input ref={ref} {...props} />
));

useImperativeHandle

Customize what the parent sees when using the ref (expose methods instead of the raw DOM node).

File

• refs.tsx — DOM refs, mutable refs, forwardRef, useImperativeHandle, ref callbacks, previous value tracking