How do I install the React18 String Refs skill?

Run npx skillmds@latest add boshi-xixixi/react18-string-refs in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is React18 String Refs safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with React18 String Refs?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is React18 String Refs free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published React18 String Refs?

boshi-xixixi (@boshi-xixixi) published this skill. Their other Agent Skills are listed on their SkillMD profile.

React18 String Refs by boshi-xixixi

Name: React18 String Refs
Author: boshi-xixixi

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

boshi-xixixi Updated Sep 17, 2026

File contents

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.

---name: react18-string-refsdescription: 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 MigrationString 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](references/patterns.md#single-ref) || Multiple refs in one component | [→ patterns.md#multiple-refs](references/patterns.md#multiple-refs) || Refs in a list / dynamic refs | [→ patterns.md#list-refs](references/patterns.md#list-refs) || Callback refs (alternative approach) | [→ patterns.md#callback-refs](references/patterns.md#callback-refs) || Ref passed to a child component | [→ patterns.md#forwarded-refs](references/patterns.md#forwarded-refs) |## Scan Command```bash# Find all string ref assignments in JSXgrep -rn 'ref="' src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."# Find all this.refs accessorsgrep -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 RuleEvery 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 JSX3. Replace `this.refs.refName` → `this.refName.current` everywhereRead `references/patterns.md` for the full before/after for each case.

Frequently asked questions