react18-string-refs
Helps your agent migrate old string references to a new format in React class components. This ensures code continues to work correctly after updates.
What it does
This tool helps update old React code to newer versions. It transforms text references (like `ref='myInput'`) into a more modern format (`React.createRef()`), ensuring your code works correctly.
When to use it
- ✓When you are updating an old React project to a newer version.
- ✓If you encounter warnings about 'string refs' in your React code.
- ✓Before you start manually rewriting references in your code.
Example of what to ask your AI
“How do I update my 'string refs' to the modern format in React?”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The tool identifies where you use text references in your React code. It then shows the exact pattern to replace them with `React.createRef()`, which is the correct way to do it in current React versions.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add github/awesome-copilot --skill react18-string-refsOr download just the file:
curl -L https://raw.githubusercontent.com/github/awesome-copilot/main/skills/react18-string-refs/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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.
FAQ
What are 'string refs'?
They are an old way of referencing elements in React using a text name, like `ref='myInput'`. This method has been replaced by a safer and more modern one.
Why do I need to update?
'String refs' have been deprecated and will be removed in future React versions. Updating ensures your code continues to work and is compatible with new versions.
What is `React.createRef()`?
It is the recommended and modern way to create references to elements in class components in React. It is safer and more explicit.
Details
Original description by the author
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 pat
repo: github/awesome-copilot
Popularity
- GitHub stars
- 40k
- Ranking position
- #5331
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
acquire-codebase-knowledge
Helps your agent understand and document an existing code project. It's useful for onboarding new people or getting an overview of the architecture.
github/awesome-copilot
acreadiness-assess
Enables your agent to assess a project's readiness for AI and generate a report. It's useful for understanding how well a project is prepared to use AI tools.
github/awesome-copilot
acreadiness-generate-instructions
Helps your agent create instructions for AI tools based on an assessment. It's useful for improving how AI interacts with code and closing identified gaps.
github/awesome-copilot
acreadiness-policy
Enables your agent to help define or apply policies for AI project assessment. It's useful for standardizing how projects are evaluated and ensuring compliance.
github/awesome-copilot
Similar skills
angular-developer
Helps your agent create Angular code and give project structure advice. Useful for starting new projects, creating code parts, or improving performance and accessibility.
affaan-m/ECC
frontend-a11y
Helps your agent make web interfaces accessible to everyone. It ensures websites and apps work well with screen readers and keyboard navigation.
affaan-m/ECC
frontend-patterns
Has your agent apply modern patterns in frontend development. It optimizes performance, manages state, and follows best practices in React and Next.js.
affaan-m/ECC