react18-string-refs
Provides exact migration patterns for React string refs (ref="name" + this.refs.name) to React.createRef() in class components. Use this skill whenever migrating string ref usage - including single element refs, multiple refs in a component, refs in lists, callback refs, and refs passed to child components. Always use this skill before writing any ref migration code - the multiple-refs-in-list pattern is particularly tricky and this skill prevents the most common mistakes. Use it for React 18.3.1 migration (string refs warn) and React 19 migration (string refs removed).
How do I install this agent skill?
npx skills add https://github.com/github/awesome-copilot --skill react18-string-refsIs this agent skill safe to install?
- Gen Agent Trust Hubpass
This skill provides documentation and patterns for migrating deprecated React string refs to the modern React.createRef API. It contains standard grep commands for local code search and illustrative React code examples. No security issues were detected.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
- ZeroLeakspass
Score: 93/100 · 2 sections analyzed
What does this agent skill do?
React 18 String Refs Migration
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.
Quick Pattern Map
| 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 |
Scan Command
# 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.
The Migration Rule
Every string ref migrates to React.createRef():
- Add
refName = React.createRef();as a class field (or in constructor) - Replace
ref="refName"→ref={this.refName}in JSX - Replace
this.refs.refName→this.refName.currenteverywhere
Read references/patterns.md for the full before/after for each case.
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/github/awesome-copilot/react18-string-refs">View react18-string-refs on skillZs</a>