Agent-Skills.md

Agent Skills: React 18 String Refs Migration

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).

UncategorizedID: github/awesome-copilot/react18-string-refs

Repository

github/awesome-copilot
githubLicense: MIT
38,9014,927

Install this agent skill to your local

pnpm dlx add-skill https://github.com/github/awesome-copilot/tree/HEAD/skills/react18-string-refs

Skill Files

Browse the full folder contents for react18-string-refs.

Download Skill

Loading file tree…

skills/react18-string-refs/SKILL.md

Skill Metadata

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 | | 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():

  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.

React 18 String Refs Migration Skill | Agent Skills