useRef

`useRef` holds a mutable `.current` field that persists across renders without triggering updates when it changes. Attach refs to DOM nodes for focus management, measurements, or integrating non-React libraries.

Refs also store instance values — timer ids, previous props, or abort controllers — that should not live in state because they do not affect UI directly. Reading or writing `ref.current` during render is allowed for some patterns but can surprise readers; document intent.

Do not use refs to duplicate state that should drive UI.

On interviews, explain the concept with a concrete example and name the behavior interviewers probe.

Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.

The trade-off is often clarity versus reuse or explicit props versus convenience.

Checklist:

• Ref changes do not rerender.
• DOM refs integrate imperative APIs.
• Avoid mirroring visible state in refs.