React 18 String Refs Migration
OfficialFreeSeamlessly migrate string refs to React.createRef() in your components.
Free · Opens the source repo
What React 18 String Refs Migration does
The React 18 String Refs Migration skill is designed to assist developers in transitioning from deprecated string refs to the recommended React.createRef() method in class components. String refs, which were commonly used as ref="name" along with this.refs.name, have been deprecated since React 16.3 and will be completely removed in React 19. This skill provides a structured approach to ensure that your migration is both efficient and error-free.
With this skill, developers can access a comprehensive pattern map that outlines the necessary steps for various scenarios, including single element refs, multiple refs within a component, dynamic refs in lists, callback refs, and refs passed to child components. Each migration pattern is linked to detailed examples in the accompanying patterns.md, making it easy to understand the before-and-after code changes required for each case.
Additionally, the skill includes bash commands to help identify all instances of string refs and this.refs in your codebase. This ensures that you can locate and migrate all relevant references systematically. By following the provided migration rules, developers can confidently convert their string refs to the new standard, reducing the risk of introducing bugs during the transition.
This skill is particularly valuable for developers working on legacy React applications that require updates to comply with the latest React standards. It is an essential tool for anyone looking to maintain code quality and ensure compatibility with future versions of React.
When to use it
Use this skill when you are preparing to migrate string refs in your React class components, especially when upgrading to React 18 or 19.
When not to use it
This skill is not suitable for functional components that use hooks or for projects that do not utilize string refs.
What you can build with it
Upgrading Legacy Code
When updating an older React application, this skill helps ensure all string refs are migrated correctly to avoid future issues.
Refactoring Class Components
Use this skill during refactoring sessions to systematically update string refs in class components across your codebase.
Preparing for React 19
As React 19 removes string refs, this skill is essential for preparing your application to be compatible with the latest version.
How to install React 18 String Refs Migration
View source1. Install with the skills CLI
npx skills add github/awesome-copilot/react18-string-refs --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by githubReact 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.
Frequently asked questions about React 18 String Refs Migration
Similar skills
React Composition Patterns
Streamline your React component architecture with proven patterns.
Pester Should Migration
Easily convert Pester v5 assertions to v6 syntax.
Radix to Base UI Migration
Seamlessly migrate React components from Radix UI to Base UI.
Migrate Next.js to Vinext
Seamlessly transition your Next.js projects to Vinext.
WinUI 3 Migration Guide
Streamline your UWP to WinUI 3 migration process.
Refactor
Enhance code maintainability without altering behavior.