[deps] Upgrade to latest version of react #870
Description
Recommended Upgrade Path
Upgrade to React 18.3 First: React 18.3 includes deprecation warnings for features removed in React 19, helping identify necessary code changes.
Run Codemods:
Utilize the official React 19 codemods to automate common refactorings, eg:
npx codemod@latest react/19/migration-recipe
Update Dependencies
Ensure all dependencies are compatible with React 19.
Check for updates or replacements for packages that are no longer maintained.
Dependencies depending on react:
- enzyme is dead, we'll need to migrate away from it. It seems that the most widely used and maintained alternative is React Testing Library (RTL), but it's not a drop in replacement.
- react-dom:
{ react: '^19.1.0' } - react-cookie:
{ react: '>= 16.3.0' } - react-countdown:
{ react: '>= 15', 'react-dom': '>= 15' } - react-helmet: { react: '>=16.3.0' }
- react-side-effect:
{ react: '^16.3.0 || ^17.0.0 || ^18.0.0' } - react-infinite-scroll-component:
{ react: '>=16.0.0' } - react-phone-input:
{ lodash: '^4.11.1', react: '^0.14.8 || ^15.0.1' } - react-redux:
{ '@types/react': '^18.2.25 || ^19', react: '^18.0 || ^19', redux: '^5.0.0' } - react-router-dom:
{ react: '>=18', 'react-dom': '>=18' } - react-router:
{ react: '>=18', 'react-dom': '>=18' } - react-select:
{ react: '^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0', 'react-dom': '^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0' } - react-transition-group:
{ react: '>=16.6.0', 'react-dom': '>=16.6.0' } - use-isomorphic-layout-effect:
{ react: '^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0' } - react-test-renderer:
{ react: '^19.1.0' } - react-toastify:
{ react: '^18 || ^19', 'react-dom': '^18 || ^19' }
Test Thoroughly
After making the necessary changes, run your test suite to catch any regressions or issues introduced during the upgrade.