React18 String Refs

If you're migrating a React codebase to 18.3.1 or 19 and hitting string ref warnings, this gives you the exact patterns to convert ref="name" and this.refs.name to React.createRef(). It covers the straightforward cases like single element refs, but the real value is in the tricky scenarios like refs in lists where you need different approaches than just search and replace. Includes grep commands to scan your codebase for both halves of the pattern, which is helpful since string refs have two locations that need changing. Honestly a narrow use case, but if you're doing this migration on any moderately sized codebase, having the patterns written out prevents the kind of mistakes that waste an afternoon.

skills.sh installs: 743
GitHub stars: 41K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add github/awesome-copilot --skill react18-string-refs --agent claude-code

Installs into .claude/skills of the current project.

Files

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.