From react18-upgrade
Migrates React string refs (ref="name" + this.refs.name) to React.createRef() in class components, handling single refs, lists, callbacks, and forwarded refs. Essential for React 18.3.1 warnings and React 19 compatibility.
npx claudepluginhub passelin/marketplace-test --plugin react18-upgradeThis skill uses the workspace's default tool permissions.
String refs (`ref="myInput"` + `this.refs.myInput`) were deprecated in React 16.3, warn in React 18.3.1, and are **removed in React 19**.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Analyzes competition with Porter's Five Forces, Blue Ocean Strategy, and positioning maps to identify differentiation opportunities and market positioning for startups and pitches.
String refs (ref="myInput" + this.refs.myInput) were deprecated in React 16.3, warn in React 18.3.1, and are removed in React 19.
| Pattern | Reference |
|---|---|
| Single ref on a DOM element | → patterns.md#single-ref |
| Multiple refs in one component | → patterns.md#multiple-refs |
| Refs in a list / dynamic refs | → patterns.md#list-refs |
| Callback refs (alternative approach) | → patterns.md#callback-refs |
| Ref passed to a child component | → patterns.md#forwarded-refs |
# Find all string ref assignments in JSX
grep -rn 'ref="' src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."
# Find all this.refs accessors
grep -rn "this\.refs\." src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."
Both should be migrated together - find the ref="name" and the this.refs.name accesses for each component as a pair.
Every string ref migrates to React.createRef():
refName = React.createRef(); as a class field (or in constructor)ref="refName" → ref={this.refName} in JSXthis.refs.refName → this.refName.current everywhereRead references/patterns.md for the full before/after for each case.