About react18-string-refs
A migration skill for React developers replacing deprecated string refs before React 19 removes them. It pairs a scan workflow with refactoring patterns for common ref usages.
Key features
- 01Scan JSX assignments and this.refs accessors
- 02Replace string refs with React.createRef()
- 03Handle single and multiple refs
- 04Cover list, callback, and forwarded refs
Use cases
- 01Locate string refs across a React codebase
- 02Update components ahead of React 19 migration
- 03Choose patterns for dynamic or child-component refs
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/react18-string-refsin Claude Code to confirm it loaded.
Bundled filesreferences/patterns.md
Details
From the project READMEReact 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.
Comments
Markdown supported