{"id":"6c936f46-a03e-46e3-b602-c7632481a9c7","shortId":"7jMVtU","kind":"skill","title":"react18-dep-compatibility","tagline":"React 18.3.1 and React 19 dependency compatibility matrix.","description":"# React Dependency Compatibility Matrix\n\nMinimum versions required for React 18.3.1 and React 19 compatibility.\n\nUse 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.\n\nReview 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.\n## Core Upgrade Targets\n\n| Package | React 17 (current) | React 18.3.1 (min) | React 19 (min) | Notes |\n|---|---|---|---|---|\n| `react` | 17.x | **18.3.1** | **19.0.0** | Pin exactly to 18.3.1 for the R18 orchestra |\n| `react-dom` | 17.x | **18.3.1** | **19.0.0** | Must match react version exactly |\n\n## Testing Libraries\n\n| Package | React 18 Min | React 19 Min | Notes |\n|---|---|---|---|\n| `@testing-library/react` | **14.0.0** | **16.0.0** | RTL 13 uses ReactDOM.render internally - broken in R18 |\n| `@testing-library/jest-dom` | **6.0.0** | **6.0.0** | v5 works but v6 has React 18 matcher updates |\n| `@testing-library/user-event` | **14.0.0** | **14.0.0** | v13 is sync, v14 is async - API change required |\n| `jest` | **27.x** | **27.x** | jest 27+ with jsdom 16+ for React 18 |\n| `jest-environment-jsdom` | **27.x** | **27.x** | Must match jest version |\n\n## Apollo Client\n\n| Package | React 18 Min | React 19 Min | Notes |\n|---|---|---|---|\n| `@apollo/client` | **3.8.0** | **3.11.0** | 3.8 adds `useSyncExternalStore` for concurrent mode |\n| `graphql` | **15.x** | **16.x** | Apollo 3.8+ peer requires graphql 15 or 16 |\n\nRead **`references/apollo-details.md`** for concurrent mode issues and MockedProvider changes.\n\n## Emotion\n\n| Package | React 18 Min | React 19 Min | Notes |\n|---|---|---|---|\n| `@emotion/react` | **11.10.0** | **11.13.0** | 11.10 adds React 18 concurrent mode support |\n| `@emotion/styled` | **11.10.0** | **11.13.0** | Must match @emotion/react version |\n| `@emotion/cache` | **11.10.0** | **11.13.0** | If used directly |\n\n## React Router\n\n| Package | React 18 Min | React 19 Min | Notes |\n|---|---|---|---|\n| `react-router-dom` | **v6.0.0** | **v6.8.0** | v5 → v6 is a breaking migration - see details below |\n| `react-router-dom` v5 | 5.3.4 (workaround) | ❌ Not supported | See legacy peer deps note |\n\n**react-router v5 → v6 is a SEPARATE migration sprint.** Read `references/router-migration.md`.\n\n## Redux\n\n| Package | React 18 Min | React 19 Min | Notes |\n|---|---|---|---|\n| `react-redux` | **8.0.0** | **9.0.0** | v7 works on R18 legacy root only - breaks on concurrent mode |\n| `redux` | **4.x** | **5.x** | Redux itself is framework-agnostic - react-redux version matters |\n| `@reduxjs/toolkit` | **1.9.0** | **2.0.0** | RTK 1.9 tested against React 18 |\n\n## Other Common Packages\n\n| Package | React 18 Min | React 19 Min | Notes |\n|---|---|---|---|\n| `react-query` / `@tanstack/react-query` | **4.0.0** | **5.0.0** | v3 doesn't support concurrent mode |\n| `react-hook-form` | **7.0.0** | **7.43.0** | v6 has concurrent mode issues |\n| `formik` | **2.2.9** | **2.4.0** | v2.2.9 patched for React 18 |\n| `react-select` | **5.0.0** | **5.8.0** | v4 has peer dep conflicts with R18 |\n| `react-datepicker` | **4.8.0** | **6.0.0** | v4.8+ added React 18 support |\n| `react-dnd` | **16.0.0** | **16.0.0** | v15 and below have R18 concurrent mode issues |\n| `prop-types` | any | any | Standalone - unaffected by React version |\n\n---\n\n## Conflict Resolution Decision Tree\n\n```\nnpm ls shows peer conflict for package X\n         │\n         ▼\nDoes package X have a version that supports React 18?\n  YES → npm install X@[min-compatible-version]\n  NO  ↓\n         │\nIs the package critical to the app?\n  YES → check GitHub issues for React 18 branch/fork\n      → check if maintainer has a PR open\n      → last resort: --legacy-peer-deps (document why)\n  NO  → consider removing the package\n```\n\n## --legacy-peer-deps Rules\n\nOnly use `--legacy-peer-deps` when:\n- The package has no React 18 compatible release\n- The package is actively maintained (not abandoned)\n- The conflict is only a peer dep declaration mismatch (not actual API incompatibility)\n\n**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.","tags":["react18","dep","compatibility","awesome","copilot","github","agent-skills","agents","custom-agents","github-copilot","hacktoberfest","prompt-engineering"],"capabilities":["skill","source-github","skill-react18-dep-compatibility","topic-agent-skills","topic-agents","topic-awesome","topic-custom-agents","topic-github-copilot","topic-hacktoberfest","topic-prompt-engineering"],"categories":["awesome-copilot"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/github/awesome-copilot/react18-dep-compatibility","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add github/awesome-copilot","source_repo":"https://github.com/github/awesome-copilot","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 30743 github stars · SKILL.md body (4,379 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T00:52:16.003Z","embedding":null,"createdAt":"2026-04-18T21:50:54.518Z","updatedAt":"2026-04-22T00:52:16.003Z","lastSeenAt":"2026-04-22T00:52:16.003Z","tsv":"'/jest-dom':160 '/react':146 '/user-event':175 '1.9':381 '1.9.0':378 '11.10':265 '11.10.0':263,273,280 '11.13.0':264,274,281 '13':150 '14.0.0':147,176,177 '15':232,241 '16':196,234,243 '16.0.0':148,453,454 '17':99,109,124 '18':137,169,199,216,256,268,289,339,385,391,427,448,494,517,556 '18.3.1':6,22,102,111,116,126 '19':9,25,105,140,219,259,292,342,394 '19.0.0':112,127 '2.0.0':379 '2.2.9':421 '2.4.0':422 '27':188,190,193,204,206 '3.11.0':224 '3.8':225,237 '3.8.0':223 '4':362 '4.0.0':401 '4.8.0':443 '5':364 '5.0.0':402,431 '5.3.4':315 '5.8.0':432 '6.0.0':161,162,444 '7.0.0':413 '7.43.0':414 '8.0.0':348 '9.0.0':349 'abandon':565 'accept':80 'activ':562 'actual':576 'ad':446 'add':226,266 'affect':93 'agnost':371 'api':184,577 'apollo':212,236 'apollo/client':222 'app':510 'assess':55 'async':183 'branch/fork':518 'break':305,357 'broken':154 'chang':185,252 'check':31,512,519 'client':213 'comment':588 'common':387 'compat':4,11,15,26,90,501,557 'concurr':88,229,247,269,359,407,417,460 'conflict':43,84,437,473,481,567 'consid':535 'core':94 'critic':507 'current':100 'datepick':442 'decid':44 'decis':475 'declar':573 'dep':3,53,322,436,531,542,549,572,584 'depend':10,14,34,42,83 'detail':308 'direct':284 'dnd':452 'document':532,579 'doesn':404 'dom':123,298,313 'emot':253 'emotion/cache':279 'emotion/react':262,277 'emotion/styled':272 'environ':202 'especi':86 'everi':580 'exact':114,132 'explain':599 'file':598 'form':412 'formik':420 'framework':370 'framework-agnost':369 'github':513 'graphql':231,240 'hook':411 'incompat':578 'instal':73,497 'intern':153 'issu':249,419,462,514 'jest':187,192,201,210 'jest-environment-jsdom':200 'jsdom':195,203 'last':526 'legaci':51,320,354,529,540,547,582 'legacy-peer-dep':50,528,539,546,581 'librari':134,145,159,174 'ls':478 'maintain':521,563 'match':129,209,276 'matcher':170 'matrix':12,16,69 'matter':376 'may':91 'migrat':66,306,332 'migration.md':597 'min':103,106,138,141,217,220,257,260,290,293,340,343,392,395,500 'min-compatible-vers':499 'minimum':17 'mismatch':574 'mockedprovid':251 'mode':89,230,248,270,360,408,418,461 'must':128,208,275 'necessari':603 'note':107,142,221,261,294,323,344,396 'npm':72,82,477,496 'open':525 'orchestra':120 'packag':97,135,214,254,287,337,388,389,483,486,506,538,552,560 'package.json':593 'patch':424 'peer':41,52,238,321,435,480,530,541,548,571,583 'pin':113 'pr':524 'prop':464 'prop-typ':463 'queri':399 'r18':119,156,353,439,459 'react':5,8,13,21,24,38,61,76,98,101,104,108,122,130,136,139,168,198,215,218,255,258,267,285,288,291,296,311,325,338,341,346,373,384,390,393,398,410,426,429,441,447,451,471,493,516,555 'react-datepick':440 'react-dnd':450 'react-dom':121 'react-hook-form':409 'react-queri':397 'react-redux':345,372 'react-rout':60,324 'react-router-dom':295,310 'react-select':428 'react18':2 'react18-dep-compatibility':1 'reactdom.render':152 'read':244,334 'redux':336,347,361,366,374 'reduxjs/toolkit':377 'references/apollo-details.md':245 'references/router-migration.md':335 'releas':558 'remov':536 'requir':19,186,239 'resolut':85,474 'resolv':40 'resort':527 'review':67 'risk':57 'root':355 'router':62,286,297,312,326 'rtk':380 'rtl':149 'rule':543 'run':71 'see':307,319 'select':430 'separ':331 'show':479 'skill':29 'skill-react18-dep-compatibility' 'source-github' 'sprint':333 'standalon':468 'support':35,271,318,406,449,492 'sync':180 'tanstack/react-query':400 'target':37,96 'test':133,144,158,173,382 'testing-librari':143,157,172 'top':591 'topic-agent-skills' 'topic-agents' 'topic-awesome' 'topic-custom-agents' 'topic-github-copilot' 'topic-hacktoberfest' 'topic-prompt-engineering' 'tree':476 'type':465 'unaffect':469 'updat':171 'upgrad':47,77,95 'usag':585 'use':27,49,151,283,545 'usesyncexternalstor':227 'v13':178 'v14':181 'v15':455 'v2.2.9':423 'v3':403 'v4':433 'v4.8':445 'v5':63,163,301,314,327 'v6':65,166,302,328,415 'v6.0.0':299 'v6.8.0':300 'v7':350 'version':18,39,131,211,278,375,472,490,502 'whenev':30 'whether':32,45 'work':164,351 'workaround':316 'x':110,125,189,191,205,207,233,235,363,365,484,487,498 'yes':495,511","prices":[{"id":"aad5bf02-4a9d-45af-b7ce-b47842802560","listingId":"6c936f46-a03e-46e3-b602-c7632481a9c7","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"github","category":"awesome-copilot","install_from":"skills.sh"},"createdAt":"2026-04-18T21:50:54.518Z"}],"sources":[{"listingId":"6c936f46-a03e-46e3-b602-c7632481a9c7","source":"github","sourceId":"github/awesome-copilot/react18-dep-compatibility","sourceUrl":"https://github.com/github/awesome-copilot/tree/main/skills/react18-dep-compatibility","isPrimary":false,"firstSeenAt":"2026-04-18T21:50:54.518Z","lastSeenAt":"2026-04-22T00:52:16.003Z"}],"details":{"listingId":"6c936f46-a03e-46e3-b602-c7632481a9c7","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"github","slug":"react18-dep-compatibility","github":{"repo":"github/awesome-copilot","stars":30743,"topics":["agent-skills","agents","ai","awesome","custom-agents","github-copilot","hacktoberfest","prompt-engineering"],"license":"mit","html_url":"https://github.com/github/awesome-copilot","pushed_at":"2026-04-21T22:20:21Z","description":"Community-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.","skill_md_sha":"4d02035cdf0aab935b32f65f3dd4f6f2ce22a6a6","skill_md_path":"skills/react18-dep-compatibility/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/github/awesome-copilot/tree/main/skills/react18-dep-compatibility"},"layout":"multi","source":"github","category":"awesome-copilot","frontmatter":{"name":"react18-dep-compatibility","description":"React 18.3.1 and React 19 dependency compatibility matrix."},"skills_sh_url":"https://skills.sh/github/awesome-copilot/react18-dep-compatibility"},"updatedAt":"2026-04-22T00:52:16.003Z"}}