react18-dep-compatibility

Provides minimum dependency versions for React 18.3.1 and React 19 compatibility.

38.5k|4.9k|Updated Jun 11, 2025
One-click install
npx skills add https://github.com/github/awesome-copilot --skill react18-dep-compatibility
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react18-dep-compatibility
Source: https://github.com/github/awesome-copilot/tree/main/skills/react18-dep-compatibility
Command: npx skills add https://github.com/github/awesome-copilot --skill react18-dep-compatibility

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Upgrading a React 17 codebase to React 18 or 19 often triggers npm peer dependency conflicts and silent concurrent-mode breakages. This Skill provides a curated compatibility matrix of minimum package versions so you can resolve conflicts correctly before running npm install.

Core Features & Use Cases

  • Compatibility Matrix: Minimum required versions for React 18.3.1 and React 19 across testing libraries, Apollo Client, Emotion, React Router, Redux, and common packages like react-query, react-hook-form, and react-select.
  • Conflict Resolution Decision Tree: A step-by-step flow for handling npm peer dependency conflicts, including rules for when --legacy-peer-deps is acceptable and how to document it.
  • Deep-Dive References: Detailed notes on Apollo Client concurrent-mode behavior and MockedProvider test changes, plus a React Router v5 to v6 migration scope assessment with grep-based sizing commands.
  • Use Case: During a React 18 upgrade, npm reports a peer conflict on @apollo/client. Consult the matrix to learn 3.8.0 is the minimum concurrent-safe version, then install it instead of forcing legacy peer deps.

Quick Start

Ask the AI to check whether your package.json dependencies are compatible with React 18.3.1 and recommend the minimum upgrade versions.

Frequently Asked Questions about react18-dep-compatibility

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check if my dependencies support React 18?

Compare each package against the minimum-version matrix: for example @testing-library/react needs 14.0.0, @apollo/client needs 3.8.0, and react-redux needs 8.0.0. Run npm ls to find conflicts, then install the listed minimum compatible versions.

What is the minimum Apollo Client version for React 18 concurrent mode?

Apollo Client 3.8.0 is the first version compatible with React 18 concurrent rendering because it adopts useSyncExternalStore. Version 3.7 only works with the legacy ReactDOM.render root and breaks under createRoot.

When should I use --legacy-peer-deps during a React upgrade?

Use --legacy-peer-deps only when a package has no React 18 compatible release, is actively maintained, and the conflict is purely a peer declaration mismatch. Document every usage in package.json or a MIGRATION.md explaining why it was necessary.

Does react-router v5 work with React 18?

react-router-dom 5.3.4 works on React 18 legacy root with --legacy-peer-deps, but it is not supported on React 19. The v5 to v6 migration is a separate breaking change affecting Switch, useHistory, Redirect, and nested routes.

Why does @testing-library/react break after upgrading to React 18?

Versions 13 and below call ReactDOM.render internally, which is removed in React 18's createRoot API. Upgrade to @testing-library/react 14.0.0 or later, and use waitFor or findBy queries instead of setTimeout flushing in tests.

How do I estimate the scope of a React Router v5 to v6 migration?

Run grep counts for Route, Switch, Redirect, useHistory, useRouteMatch, withRouter, and history.push calls in your source. Under 30 hits is feasible in-sprint, 30-100 should be deferred, and over 100 requires a dedicated migration sprint.