React string refs migration for 18.3.1 / 19
react18-string-refs
Use documented class-component patterns to replace string refs and this.refs accesses with React.createRef().
Introduction source: author · GitHub, Inc. · b6483db44fb602654bca6a097185fcaddb305f97 Reference
Author's original introduction
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).
SkillPi interpretation
- Tasks
- Review paired string-ref assignments and this.refs accesses, then apply the document's createRef migration patterns for class components.
- Audience
- Developers maintaining React class components during React 18.3.1 or 19 migrations.
- Inputs and outputs
- Input: component code containing string refs and matching this.refs accesses. Output: code changes following the documented single, multiple, list, callback or child-ref patterns.
- Software, accounts and paid services
- An existing React codebase and its normal JavaScript build/test environment. The document includes grep scan examples and does not specify a new account or paid service. Confirm actual file access and external-service permissions in your host. Domains referenced in the documents (not a runtime allowlist): No HTTP(S) domain stated.
- Limits and differences
- Targets class-component ref patterns; lists and child-ref behavior still need project-level review and tests. The official React 19 guide also illustrates callback refs, while this skill emphasizes createRef. Author claims of preventing mistakes are not a runtime-tested guarantee.
- Testing
- Not tested
Security rating and access scope
caution · Static evidence review; not a runtime safety guarantee.
An existing React codebase and its normal JavaScript build/test environment. The document includes grep scan examples and does not specify a new account or paid service. Confirm actual file access and external-service permissions in your host. Domains referenced in the documents (not a runtime allowlist): No HTTP(S) domain stated.
Before use, confirm and authorize actual file access, external services and network destinations in your host. This review grants no runtime permissions.
Original SKILL.md
---
name: react18-string-refs
description: '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).'
---
# 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](references/patterns.md#single-ref) |
| Multiple refs in one component | [→ patterns.md#multiple-refs](references/patterns.md#multiple-refs) |
| Refs in a list / dynamic refs | [→ patterns.md#list-refs](references/patterns.md#list-refs) |
| Callback refs (alternative approach) | [→ patterns.md#callback-refs](references/patterns.md#callback-refs) |
| Ref passed to a child component | [→ patterns.md#forwarded-refs](references/patterns.md#forwarded-refs) |
## Scan Command
```bash
# 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()`:
1. Add `refName = React.createRef();` as a class field (or in constructor)
2. Replace `ref="refName"` → `ref={this.refName}` in JSX
3. Replace `this.refs.refName` → `this.refName.current` everywhere
Read `references/patterns.md` for the full before/after for each case.
Copyright and license notice
MIT License Copyright GitHub, Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
User discussion