AutoGineer
Generated banner for React18 String Refs
Generated logo for React18 String Refs

React18 String Refs

GitHubOfficialFirst committed by SaravananRajaramanDistributed by GitHub

  • Skill
  • Guidelines
  • Software development
  • MIT
  • No issues found
Download ZIP

From the author

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).
— the description by SaravananRajaraman

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a comprehensive guide for migrating deprecated string refs (ref='name' and this.refs.name) to the modern React.createRef() API. It covers various scenarios including single elements, multiple refs, and complex dynamic refs in lists, ensuring code remains compatible with React 18.3.1 and React 19, where string refs are removed.

What it does

  • Provides a clear mapping of legacy string ref patterns to modern React.createRef() implementations.
  • Offers specific strategies for handling dynamic refs within lists using Maps or callback refs.
  • Includes command-line instructions to identify legacy ref usage in existing codebases.
  • Details the step-by-step process for updating class component ref declarations and accessors.
  • Addresses edge cases like refs passed to child components.

When to use it

  • When upgrading a React application to version 18.3.1 or 19.
  • When refactoring class components to remove deprecated string ref syntax.
  • When encountering warnings about string refs in the console during development.
  • When needing a reliable pattern for managing dynamic refs in loops or maps.

Advantages

  • Prevents common pitfalls associated with dynamic ref management in lists.
  • Ensures future-proof code by aligning with React 19 requirements.
  • Provides consistent, tested patterns for various ref scenarios.
  • Reduces manual effort by offering a clear migration path for both declarations and accessors.

Usage examples

“How do I migrate a simple string ref in a class component?”
The skill instructs to replace the string ref with a React.createRef() class field and update all this.refs.name references to this.refName.current.
“What is the best way to handle dynamic refs in a list?”
The skill provides a pattern using a Map to store refs dynamically or an alternative callback ref approach to store DOM nodes directly.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/github/react18-string-refs/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip react18-string-refs.zip -d .agents/skills

Documentation by SaravananRajaraman

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

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

Files

ATTRIBUTION.md

Attribution

This folder is an unmodified copy of the Agent Skill "react18-string-refs", distributed by AutoGineer (https://autogineer.com/agent-skills).

The skill's own files are unmodified copies. AutoGineer is not affiliated with or endorsed by the author or the publisher.

Files added by AutoGineer

  • ATTRIBUTION.md: this file, written by AutoGineer

  • LICENSE: copied from LICENSE

Requirements and compatibility

Written for: GitHub Copilot

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

First committed by
GitHub avatar of SaravananRajaramanSaravananRajaraman
Publisher
GitHub (Official)
Distributed by
GitHub
Source
github/awesome-copilot · skills/react18-string-refs · commit 797337f
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced
Contributors
SaravananRajaraman

AutoGineer is not affiliated with or endorsed by SaravananRajaraman or GitHub.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download react18-string-refs.zip