Agent skill · software engineering · github
react18-string-refs
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).
Why this skill is useful
Provides specific migration patterns and commands for transitioning from string refs to React.createRef() that the AI wouldn't reliably generate on its own.
What it needs
About 1k tokens when loaded. Last updated 2026-08-07. 37,534 stars on the source repository.
What this skill does
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 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.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills github/react18-string-refs