Labsco
github logo

react18-string-refs

✓ Official★ 36,200

by github · part of github/awesome-copilot

Provides exact migration patterns for React string refs (ref="name" + this.refs.name) to React.createRef() in class components. Use this skill whenever…

🔥🔥🔥✓ VerifiedFreeQuick setup
#git
🧩 One of 7 skills in the github/awesome-copilot package — works on its own, and pairs well with its siblings.

Provides exact migration patterns for React string refs (ref="name" + this.refs.name) to React.createRef() in class components. Use this skill whenever…

Inspect the full instructions your agent will receiveExpand

This is the exact playbook injected into your agent when the skill activates — shown here so you can audit it before installing. You don't need to read it to use the skill.

by github

Provides exact migration patterns for React string refs (ref="name" + this.refs.name) to React.createRef() in class components. Use this skill whenever… npx skills add https://github.com/github/awesome-copilot --skill react18-string-refs Download ZIPGitHub36.2k

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

Copy & paste — that's it
# 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.