React 18 String Refs Migration
SkillDev toolsGives your AI the exact patterns for replacing deprecated React string refs with React.createRef() in class components. Once added, it can update your code wherever string refs appear, from single element refs to refs in lists and child components. The result is class components that no longer rely on the deprecated string ref pattern.
Instructions available. Your AI can read the instructions. Execution depends on the setup they require.
Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.
Add the skill and ask your AI to migrate string refs in a class component or file. It will apply the exact migration pattern for each case it finds.
Then ask your AI: use the React 18 String Refs Migration skill
What your AI can do with it
- Rewrite ref="name" and this.refs.name as React.createRef() in class components
- Migrate a single element ref to the modern pattern
- Update components that use multiple refs at once
- Convert refs used inside lists
- Replace callback refs with React.createRef()
- Handle refs passed to child components
What this skill tells your AI
The instructions your AI receives, as published by github/awesome-copilot in skills/react18-string-refs/SKILL.md and read by ahel’s review.
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.
Signals
- GitHub stars
- 40k
- Forks
- 5k
- Last commit
- Oct 2026
Advanced
- Item type
- skill
- Key
react18-string-refs- Source
- github.com/github/awesome-copilot
github.com/github/awesome-copilot