Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate to React 19 #2172

Draft
wants to merge 25 commits into
base: master
Choose a base branch
from

Conversation

aryaemami59
Copy link
Contributor

This PR:

  • Updates react and react-dom to v19 beta.

  • Sets the @types/react and @types/react-dom package resolutions to npm:types-react and npm:types-react-dom according to the React 19 migration guide.

  • Runs tests against different versions of React during CI. Not sure if we want to keep this addition but for now it serves as a way for us to make sure the changes we make are non-breaking and can work with both React 18 and 19.

  • Removes the now deprecated react-test-renderer package as recommended in the React 19 migration guide.

  • Updates @testing-library/react to latest version.

  • Updates @testing-library/jest-dom to latest version.

  • Replaces the now removed ReactDOM.render calls with the render function from @testing-library/react as recommended in the React 19 migration guide.

  • Replaces the now removed ReactDOM.unmountComponentAtNode calls with the cleanup function from @testing-library/react as recommended in the React 19 migration guide.

  • Updates the import path of the renderHook function from @testing-library/react-hooks to @testing-library/react as recommended by A Note about React 18 Support and react-hooks-testing-library React 18 Migration guide.

  • Removes the now unneeded @testing-library/react-hooks package.

  • Updates the new renderHook calls according to react-hooks-testing-library React 18 Migration guide.

  • Updates the inlined react-is implementation.

    Click to expand react-is related details

    In PR#28813 react-is changed the REACT_ELEMENT_TYPE symbol from 'react.element' to 'react.transitional.element'. We want our changes to be non-breaking and backwards-compatible so we conditionally set the REACT_ELEMENT_TYPE based on the detected version of React. While this is not ideal, the react-is package is CJS and not very tree-shakable. So for now we want to inline it as to not add unnecessary weight to bundle sizes, not to mention the conditional React version check helps keep our changes backwards-compatible.

  • Removes unnecessary rtl.cleanup function calls inside afterEach hooks as per @testing-library/react docs, it is done automatically.

  • Expands version ranges of react and @types/react in peerDependencies to include version 19.

Copy link

codesandbox-ci bot commented May 10, 2024

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

@aryaemami59 aryaemami59 force-pushed the migrate-to-react-19 branch 2 times, most recently from b7877bc to 93b6f07 Compare May 16, 2024 15:03
Copy link

netlify bot commented Jun 17, 2024

Deploy Preview for react-redux-docs ready!

Name Link
🔨 Latest commit d4c209b
🔍 Latest deploy log https://app.netlify.com/sites/react-redux-docs/deploys/66bfde5fd9054e0008c014be
😎 Deploy Preview https://deploy-preview-2172--react-redux-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

- We set the `@types/react` and `@types/react-dom` package resolutions to `npm:types-react` and `npm:types-react-dom` according to the React 19 migration guide.
- `ReactDOM.render` and `ReactDOM.unmountComponentAtNode` have been removed in React 19. This commit replaces their usage with `rtl.render` and `rtl.cleanup` as recommended in the React 19 migration guide.
- The `renderHook` method in `@testing-library/react-hooks` has now been moved to `@testing-library/react`. This commit updates imports and usages of the `renderHook` function to comply with the new syntax requirements in the [react-hooks-testing-library migration guide](https://github.com/testing-library/react-hooks-testing-library/blob/chore/migration-guide/MIGRATION_GUIDE.md#waitfornextupdate).
- `react-is` has changed the `REACT_ELEMENT_TYPE` symbol from `'react.element'` to `'react.transitional.element'`. We want our changes to be non-breaking and backwards-compatible so we conditionally set the `REACT_ELEMENT_TYPE` based on the detected version of React.
- According to `@testing-library/react` docs, the `cleanup` function is called automatically during the `afterEach` hook and there is no need to manually call it.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant