React 18 to React 19 Migration Diff

React 18 to 19 Migration

Migrating to a new major React version involves updating not just react itself but an entire ecosystem of related packages. The Package.json Diff tool helps you visualize all these changes at once.

Typical React 18 to 19 diff

dependencies:
  ~ react: ^18.2.0 -> ^19.0.0              [MAJOR]
  ~ react-dom: ^18.2.0 -> ^19.0.0          [MAJOR]
  ~ next: ^14.0.0 -> ^15.0.0               [MAJOR]
  ~ @tanstack/react-query: ^4.36.0 -> ^5.0.0  [MAJOR]

devDependencies:
  ~ @types/react: ^18.2.0 -> ^19.0.0       [MAJOR]
  ~ @types/react-dom: ^18.2.0 -> ^19.0.0   [MAJOR]
  ~ @testing-library/react: ^14.0.0 -> ^16.0.0  [MAJOR]
  - @types/react-test-renderer: ^18.0.0     [REMOVED]

Packages affected by React major updates

Category	Packages to update
Core	react, react-dom
Types	@types/react, @types/react-dom
Framework	next, remix, gatsby
State management	@tanstack/react-query, zustand
Testing	@testing-library/react
UI libraries	@mui/material, @chakra-ui/react

Migration strategy

1. Use this tool to create a before snapshot of your package.json
2. Update packages incrementally
3. Compare the result to verify all expected changes
4. Filter by Changed only to see every version bump
5. Look for unexpected MAJOR bumps in unrelated packages

What to watch for

• Multiple MAJOR bumps are expected in a React migration
• Some packages may need to be removed entirely (deprecated APIs)
• New packages may need to be added (e.g., new compiler packages)
• Script changes may be needed if build tools change