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.current everywhere

Read references/patterns.md for the full before/after for each case.

Files2

2 files · 7.7 KB

Select a file to preview

Overall Score

88/100

Grade

A

Excellent

Safety

95

Quality

87

Clarity

88

Completeness

82

Summary

A focused React migration guide that teaches agents exact patterns for migrating deprecated string refs (`ref="name"` + `this.refs.name`) to `React.createRef()` in class components. The skill covers five specific cases: single refs, multiple refs, dynamic list refs (including the tricky Map-based and callback ref approaches), callback refs as an alternative, and forwarded refs to child components.

Detected Capabilities

code pattern referencegrep command examplesbefore/after code examplesread-only guidance

Trigger Keywords

Phrases that MCP clients use to match this skill to user intent.

string refs migrationreact 18 deprecation warningreact createrefthis.refs replacementclass component ref patterns

Use Cases

Migrate React 16.3+ projects away from deprecated string refs
Add `React.createRef()` class fields to replace string ref patterns
Handle dynamic ref lists using Map or callback approaches
Update JSX ref bindings from `ref="name"` to `ref={this.nameRef}`
Use `forwardRef` when migrating string refs passed to child components
Prepare class component code for React 18.3.1 (warns on string refs) or React 19 (removes string refs)

Quality Notes

Well-structured reference guide with clear section hierarchy and quick navigation table
Five comprehensive before/after patterns cover the full scope of string ref usage
Includes important caveats (callback ref stability, dynamic list handling, React 18 vs 19 differences)
Provides searchable grep commands to identify string refs in a codebase
Edge case of dynamic list refs is explicitly addressed with two approaches (Map and callback)
Explanation of callback ref `.current` vs direct node access prevents common mistakes
References are consistent and navigable (internal markdown anchors)
Limitations are clear: applies only to class components (function components don't use string refs)
No external dependencies or network calls — pure reference material
Code examples are correct and runnable

Model: claude-haiku-4-5-20251001Analyzed: Jun 26, 2026

Reviews

Add this skill to your library to leave a review.

No reviews yet

Be the first to share your experience.

react18-string-refs