ref-patterns

What problem does it solve?

This Skill prevents common React ref misuse by helping you choose refs over state when you need a stable mutable handle for DOM access, measurement, focus, animations, third-party integration, or a narrowly-scoped imperative API.

Core Features & Use Cases

• Ref vs state decision-making: explains when a changing value should drive rendering (state) versus when it should not trigger renders (ref).
• useRef patterns: covers DOM refs and mutable instance values that persist across renders (e.g., interval ids, latest-args closures, previous-value snapshots).
• Ref callback patterns: uses ref={(node) => ...} for precise mount/unmount hooks and conditional attachment/composition.
• Ref propagation across component boundaries: teaches forwardRef (legacy/new options), and React 19 ref-as-prop for passing refs into function components.
• Controlled imperative APIs: uses useImperativeHandle to expose only the minimal methods a parent truly needs.
• Compound-component ref forwarding: ensures primitives forward refs through layers (e.g., Radix Slot-style merge) so consumer focus/measurement works.
• Client/Server boundary constraints: clarifies why refs require Client Components and cannot be created/passed across Server boundaries.

Quick Start

Use the ref-patterns skill to design a React component that forwards a ref safely (including compound-component cases) and uses useImperativeHandle only when imperative control is truly required.