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

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 react@18.3.1 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 react@18.3.1 + 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.

License

MIT