React 18 Dependency Compatibility
OfficialFreeEnsure your dependencies align with React 18 and 19.
Free · Opens the source repo
What React 18 Dependency Compatibility does
The React 18 Dependency Compatibility skill provides a comprehensive matrix to help developers understand the minimum required versions for various packages when upgrading to React 18.3.1 and React 19. This skill is particularly useful for resolving peer dependency conflicts, assessing the risk of migrating between versions, and making informed decisions about upgrading dependencies. By reviewing this compatibility matrix, developers can avoid potential issues before running npm install and ensure that their applications remain stable during upgrades.
The skill includes detailed information on core packages like react and react-dom, which must match exactly for compatibility, as well as popular testing libraries and state management tools. For instance, it highlights that @testing-library/react requires a minimum version of 14.0.0 for React 18, while react-redux needs to be at least version 8.0.0 to function properly with React 18's concurrent mode. This level of detail helps developers quickly identify what needs to be updated and what can remain unchanged.
Additionally, the skill offers guidance on handling peer dependency conflicts through a decision tree, which simplifies the process of determining whether to upgrade, use legacy peer dependencies, or remove packages altogether. This structured approach is invaluable when navigating the complexities of dependency management in modern React applications, especially when considering breaking changes in major libraries like react-router and redux.
Overall, this skill is designed for developers who are upgrading their React applications and need a reliable reference to ensure their dependencies are compatible with the latest versions of React. It streamlines the upgrade process and minimizes the risk of encountering runtime issues due to incompatible packages.
When to use it
Use this skill when planning an upgrade to React 18 or 19, or when resolving peer dependency conflicts.
When not to use it
This skill may not be necessary for projects that are not upgrading React or do not have complex dependency trees.
What you can build with it
Upgrading an Existing Project
When planning to upgrade a React project to version 18, use this skill to check compatibility for all dependencies.
Resolving Peer Dependency Conflicts
If you encounter peer dependency conflicts during installation, consult the matrix to find compatible versions.
Migrating to React Router v6
Use this skill to assess the implications of migrating from React Router v5 to v6 and identify necessary changes.
How to install React 18 Dependency Compatibility
View source1. Install with the skills CLI
npx skills add github/awesome-copilot/react18-dep-compatibility --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by githubReact Dependency Compatibility Matrix
Minimum versions required for React 18.3.1 and React 19 compatibility.
Use this skill whenever checking whether a dependency supports a target React version, resolving peer dependency conflicts, deciding whether to upgrade or use legacy-peer-deps, or assessing the risk of a react-router v5 to v6 migration.
Review this matrix before running npm install during a React upgrade and before accepting an npm dependency conflict resolution, especially where concurrent mode compatibility may be affected.
Core Upgrade Targets
| Package | React 17 (current) | React 18.3.1 (min) | React 19 (min) | Notes |
|---|---|---|---|---|
react | 17.x | 18.3.1 | 19.0.0 | Pin exactly to 18.3.1 for the R18 orchestra |
react-dom | 17.x | 18.3.1 | 19.0.0 | Must match react version exactly |
Testing Libraries
| Package | React 18 Min | React 19 Min | Notes |
|---|---|---|---|
@testing-library/react | 14.0.0 | 16.0.0 | RTL 13 uses ReactDOM.render internally - broken in R18 |
@testing-library/jest-dom | 6.0.0 | 6.0.0 | v5 works but v6 has React 18 matcher updates |
@testing-library/user-event | 14.0.0 | 14.0.0 | v13 is sync, v14 is async - API change required |
jest | 27.x | 27.x | jest 27+ with jsdom 16+ for React 18 |
jest-environment-jsdom | 27.x | 27.x | Must match jest version |
Apollo Client
| Package | React 18 Min | React 19 Min | Notes |
|---|---|---|---|
@apollo/client | 3.8.0 | 3.11.0 | 3.8 adds useSyncExternalStore for concurrent mode |
graphql | 15.x | 16.x | Apollo 3.8+ peer requires graphql 15 or 16 |
Read references/apollo-details.md for concurrent mode issues and MockedProvider changes.
Emotion
| Package | React 18 Min | React 19 Min | Notes |
|---|---|---|---|
@emotion/react | 11.10.0 | 11.13.0 | 11.10 adds React 18 concurrent mode support |
@emotion/styled | 11.10.0 | 11.13.0 | Must match @emotion/react version |
@emotion/cache | 11.10.0 | 11.13.0 | If used directly |
React Router
| Package | React 18 Min | React 19 Min | Notes |
|---|---|---|---|
react-router-dom | v6.0.0 | v6.8.0 | v5 → v6 is a breaking migration - see details below |
react-router-dom v5 | 5.3.4 (workaround) | ❌ Not supported | See legacy peer deps note |
react-router v5 → v6 is a SEPARATE migration sprint. Read references/router-migration.md.
Redux
| Package | React 18 Min | React 19 Min | Notes |
|---|---|---|---|
react-redux | 8.0.0 | 9.0.0 | v7 works on R18 legacy root only - breaks on concurrent mode |
redux | 4.x | 5.x | Redux itself is framework-agnostic - react-redux version matters |
@reduxjs/toolkit | 1.9.0 | 2.0.0 | RTK 1.9 tested against React 18 |
Other Common Packages
| Package | React 18 Min | React 19 Min | Notes |
|---|---|---|---|
react-query / @tanstack/react-query | 4.0.0 | 5.0.0 | v3 doesn't support concurrent mode |
react-hook-form | 7.0.0 | 7.43.0 | v6 has concurrent mode issues |
formik | 2.2.9 | 2.4.0 | v2.2.9 patched for React 18 |
react-select | 5.0.0 | 5.8.0 | v4 has peer dep conflicts with R18 |
react-datepicker | 4.8.0 | 6.0.0 | v4.8+ added React 18 support |
react-dnd | 16.0.0 | 16.0.0 | v15 and below have R18 concurrent mode issues |
prop-types | any | any | Standalone - unaffected by React version |
Conflict Resolution Decision Tree
npm ls shows peer conflict for package X
│
▼
Does package X have a version that supports React 18?
YES → npm install X@[min-compatible-version]
NO ↓
│
Is the package critical to the app?
YES → check GitHub issues for React 18 branch/fork
→ check if maintainer has a PR open
→ last resort: --legacy-peer-deps (document why)
NO → consider removing the package
--legacy-peer-deps Rules
Only use --legacy-peer-deps when:
- The package has no React 18 compatible release
- The package is actively maintained (not abandoned)
- The conflict is only a peer dep declaration mismatch (not actual API incompatibility)
Document every --legacy-peer-deps usage in a comment at the top of package.json or in a MIGRATION.md file explaining why it was necessary.
Frequently asked questions about React 18 Dependency Compatibility
Similar skills
Playwright Component Testing
Test React and Vue components in isolation with Playwright.
Fluent UI Blazor
Integrate Fluent UI components in Blazor applications effortlessly.
Build MCP App
Create interactive UI widgets for MCP servers.
Web Design Reviewer
Identify and fix design issues in websites efficiently.
Markstream Install
Seamlessly integrate Markstream for Markdown rendering.
GSAP & Framer Scroll Animation
Create advanced scroll animations effortlessly.