Hooks Essentials

React useRef Hook

Use refs for DOM access and mutable values that persist across renders without re-rendering.

Accessing DOM nodes

tsx

const inputRef = useRef<HTMLInputElement | null>(null);

<button onClick={() => inputRef.current?.focus()}>Focus</button>
<input ref={inputRef} />

Mutable values across renders

tsx

const renderCount = useRef(0);
renderCount.current += 1;

`useRef` vs state

useRef: value changes do not trigger re-render
useState: value changes trigger re-render

Use cases

Imperative DOM actions
Store timer IDs
Previous values tracking

Next, we will optimize with useMemo and useCallback.

PreviousReact useContext HookHooks Essentials

NextReact useMemo and useCallbackHooks Essentials

← Back to Learn React Overview