Guide React ref design for DOM access, forwarding, and imperative APIs.
npx skills add https://github.com/jacob-balslev/skill-graph --skill ref-patterns
Please help me install this Agent Skill. Skill: ref-patterns Source: https://github.com/jacob-balslev/skill-graph/tree/main/marketplace/skills/ref-patterns Command: npx skills add https://github.com/jacob-balslev/skill-graph --skill ref-patterns
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.
ref={(node) => ...} for precise mount/unmount hooks and conditional attachment/composition.forwardRef (legacy/new options), and React 19 ref-as-prop for passing refs into function components.useImperativeHandle to expose only the minimal methods a parent truly needs.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.
High-intent search queries and answers about installing and using this skill.
Use React refs instead of state when you need a stable mutable handle for DOM access, measurement, or focus that does not trigger re-renders. State drives rendering, while refs persist mutable values silently across render cycles.
You forward a ref through React components by using forwardRef for legacy compatibility or the React 19 ref-as-prop feature. This passes the ref directly through component boundaries down to the target DOM node.
The best way to expose imperative methods in React is using useImperativeHandle. This hook exposes a minimal, controlled API from a child component that parents invoke via a ref, keeping internal logic encapsulated.
Refs fail across Server and Client boundaries because React requires refs to exist exclusively in Client Components. Passing or creating refs across Server boundaries breaks since server-side code lacks DOM access.
Composing multiple refs in React uses ref callback patterns to merge forwarded and local refs together. This ensures consumer focus and measurement work correctly through compound-component layers like Radix Slot.
djankiesMigrate deprecated forwardRef usage to the ref-as-prop pattern in React 19.
JhabbigDesign reusable UI components across React, Vue, and Svelte with accessibility standards.
ncaqReplace React useRef patterns with declarative HTML features and state-driven logic.
OpenAEC-FoundationDocument React 18/19 useRef, forwardRef, and useImperativeHandle patterns with TSX examples.