Skip to main content
plugin GitHub Copilot official · GitHub

react18-upgrade — GitHub Copilot plugin: migration and install

Guides React 16 and 17 projects through an upgrade to React 18.3.1, covering deprecated APIs, dependencies, class components, and tests.

Install into GitHub Copilot · Command from the source All methods and platforms ↓
copilot plugin install react18-upgrade@awesome-copilot
Open on GitHub

What react18-upgrade does

The plugin organizes the migration into an audit, dependency upgrades, component changes, batching fixes, and test verification. It targets class-heavy codebases and checks for unsafe lifecycle methods, legacy context, string refs, and calls to ReactDOM.render.

Six specialized agents coordinate the work, while seven skills provide grep patterns and migration guidance for APIs and tests. The toolkit also covers Enzyme-to-React Testing Library rewrites, StrictMode test changes, and compatibility with Apollo Client, Emotion, and react-router. Its dependency path targets [email protected] and React Testing Library v14+.

Install it when upgrading a codebase with many class components and you want the tests handled as part of the migration. Projects without those patterns may have little use for most of its workflow.

What it helps with

  • locate unsafe lifecycle methods and deprecated React APIs
  • replace legacy context and string refs with current APIs
  • upgrade React and resolve dependency conflicts
  • fix regressions caused by automatic batching
  • rewrite Enzyme tests for React Testing Library

Example prompts for the agent

  • Start the React 18 migration for my class-component codebase.
  • Find unsafe lifecycle methods and suggest the right replacements.
  • Rewrite the Enzyme tests for React Testing Library and check StrictMode behavior.

How to install react18-upgrade

Command from the source

copilot plugin install react18-upgrade@awesome-copilot

From the same set554

The whole set →
git-commit official github This skill reviews Git changes, stages related files, and creates Conventional Commits. Use it when you want an agent to make one commit or split work into separate commits. GitHub Copilot 47,165installs excalidraw-diagram-generator official github Turn a plain-language description into an Excalidraw diagram. Useful for mapping processes, system structure, and relationships between entities. GitHub Copilot 31,639installs multi-stage-dockerfile official github This skill guides GitHub Copilot in writing multi-stage Dockerfiles for different languages and frameworks. Use it when the final runtime image should contain fewer build dependencies. GitHub Copilot 29,688installs documentation-writer official github Skill that turns the agent into a technical writer following the Diátaxis framework: tutorials, how-to guides, reference, and explanation. Proposes structure before writing. GitHub Copilot 27,757installs prd official github Turns a feature idea into a structured PRD with user stories, technical requirements, and risks. Use it when planning a software feature or an AI-powered one. GitHub Copilot 24,035installs refactor official github This skill reshapes existing code without changing its external behavior. Use it for gradual cleanup of large functions, duplication, weak types, and code smells. GitHub Copilot 22,321installs java-springboot official github Gives GitHub Copilot Spring Boot development practices, from project layout to tests and security. Use it when writing or reviewing Java application code. GitHub Copilot 21,272installs create-readme official github This skill reviews a project and creates a structured README.md. Use it when the repository needs clear documentation based on its actual files and code. GitHub Copilot 19,081installs

Questions about react18-upgrade

How do I install react18-upgrade in GitHub Copilot?

Run copilot plugin install react18-upgrade@awesome-copilot.

What does react18-upgrade do?

It guides React 16 or 17 projects through an upgrade to React 18.3.1, including API changes, dependency updates, class-component migrations, and tests.

Does it help migrate Enzyme tests?

Yes. The plugin includes guidance for rewriting Enzyme tests to React Testing Library and handling RTL v14+ API changes.

Source text

react18-upgrade · MIT
# React 18 Upgrade Plugin

Enterprise toolkit for migrating React 16/17 class-component codebases to React 18.3.1. Includes six specialized agents and seven skills targeting the specific challenges of upgrading legacy class-heavy applications.

## Installation

```bash
copilot plugin install react18-upgrade@awesome-copilot
```

## What's Included

### Agents

1. **react18-commander** - Master orchestrator that coordinates the entire migration pipeline through audit, dependencies, class-component surgery, automatic batching fixes, and test verification phases.

2. **react18-auditor** - Deep-scan specialist that identifies every React 18 breaking change: unsafe lifecycle methods, legacy context, string refs, batching vulnerabilities, and all deprecation patterns.

3. **react18-dep-surgeon** - Dependency upgrade specialist that pins [email protected] exactly, upgrades testing-library to v14+, resolves all peer conflicts, and returns GO/NO-GO confirmation.

4. **react18-class-surgeon** - Lifecycle and API migration specialist that performs semantic migrations for:
   - `componentWillMount` → `componentDidMount` or constructor
   - `componentWillReceiveProps` → `getDerivedStateFromProps` or `componentDidUpdate`
   - `componentWillUpdate` → `getSnapshotBeforeUpdate` or `componentDidUpdate`
   - Legacy Context → `createContext`
   - String refs → `React.createRef()`
   - `findDOMNode` → direct refs
   - `ReactDOM.render` → `createRoot`

5. **react18-batching-fixer** - Automatic batching regression specialist that identifies and fixes the #1 silent runtime breaker in React 18: setState calls in async methods that relied on immediate intermediate re-renders.

6. **react18-test-guardian** - Test suite fixer that handles Enzyme-to-RTL rewrites, RTL v14 API updates, automatic batching test regressions, StrictMode double-invoke changes, and runs tests until zero failures.

### Skills

1. **react-audit-grep-patterns** - Reference grep patterns for auditing React 18 deprecations across class components.

2. **react18-batching-patterns** - Patterns and strategies for identifying and fixing automatic batching regressions.

3. **react18-dep-compatibility** - Dependency compatibility matrix for React 18 with migration paths for testing-library, Apollo, Emotion, react-router.

4. **react18-enzyme-to-rtl** - Complete guide for rewriting Enzyme tests to React Testing Library (RTL v14+).

5. **react18-legacy-context** - Migration patterns for legacy context API → `createContext`.

6. **react18-lifecycle-patterns** - Detailed migration patterns for all three unsafe lifecycle methods.

7. **react18-string-refs** - Reference implementations for migrating string refs to `React.createRef()`.

## Quick Start

```
Ask: "Start implementing React 18 migration for my class-component codebase"
```

The react18-commander will guide you through:

1. Audit → identify all breaking changes
2. Deps → upgrade to [email protected] + compatible libraries
3. Class Surgery → migrate lifecycle methods and APIs
4. Batching Fixes → fix automatic batching regressions
5. Tests → migrate test suite and run to green

## Why React 18.3.1?

React 18.3.1 was released to surface **explicit warnings** for every API that React 19 will remove. A clean 18.3.1 run with zero warnings is the direct prerequisite for the React 19 migration.

## Key Features

- ✅ Targets class-component-heavy codebases (NOT just functional component patterns)
- ✅ Automatic batching issue detection and `flushSync` recommendations
- ✅ Enzyme test detection with full RTL rewrite capability
- ✅ Memory-based resumable pipeline - survive interruptions
- ✅ Zero tolerance for incomplete migrations - run to full success
- ✅ StrictMode-aware test fixes
- ✅ Apollo Client, Emotion, react-router compatibility handling

## Source

This plugin is part of [Awesome Copilot](https://github.com/github/awesome-copilot).

## License

MIT

© Awesome Copilot Community · MIT · github/awesome-copilot

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor