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

chore(deps): Bump react-redux from 7.2.8 to 8.0.0 #12853

Merged
merged 2 commits into from Apr 21, 2022

Conversation

dependabot[bot]
Copy link
Contributor

@dependabot dependabot bot commented on behalf of github Apr 17, 2022

Bumps react-redux from 7.2.8 to 8.0.0.

Release notes

Sourced from react-redux's releases.

v8.0.0

This major version release updates useSelector, connect, and <Provider> for compatibility with React 18, rewrites the React-Redux codebase to TypeScript (obsoleting use of @types/react-redux), modernizes build output, and removes the deprecated connectAdvanced API and the pure option for connect.

npm i react-redux@latest

yarn add react-redux@latest

Overview, Compatibility, and Migration

Our public API is still the same ( <Provider>, connect and useSelector/useDispatch), but we've updated the internals to use the new useSyncExternalStore hook from React. React-Redux v8 is still compatible with all versions of React that have hooks (16.8+, 17.x, and 18.x; React Native 0.59+), and should just work out of the box.

In most cases, it's very likely that the only change you will need to make is bumping the package version to "react-redux": "^8.0".

If you are using the rarely-used connectAdvanced API, you will need to rewrite your code to avoid that, likely by using the hooks API instead. Similarly, the pure option for connect has been removed.

If you are using Typescript, React-Redux is now written in TS and includes its own types. You should remove any dependencies on @types/react-redux.

While not directly tied to React-Redux, note that the recently updated @types/react@18 major version has changed component definitions to remove having children as a prop by default. This causes errors if you have multiple copies of @types/react in your project. To fix this, tell your package manager to resolve @types/react to a single version. Details:

[React issue #24304: React 18 types broken since release](facebook/react#24304)

Additionally, please see the React post on How to Ugprade to React 18 for details on how to migrate existing apps to correctly use React 18 and take advantage of its new features.

Changelog

React 18 Compatibility

React-Redux now requires the new useSyncExternalStore API in React 18. By default, it uses the "shim" package which backfills that API in earlier React versions, so React-Redux v8 is compatible with all React versions that have hooks (16.8+, and React Native 0.59+) as its acceptable peer dependencies.

We'd especially like to thank the React team for their extensive support and cooperation during the useSyncExternalStore development effort. They specifically designed useSyncExternalStore to support the needs and use cases of React-Redux, and we used React-Redux v8 as a testbed for how useSyncExternalStore would behave and what it needed to cover. This in turn helped ensure that useSyncExternalStore would be useful and work correctly for other libraries in the ecosystem as well.

Our performance benchmarks show parity with React-Redux v7.2.5 for both connect and useSelector, so we do not anticipate any meaningful performance regressions.

useSyncExternalStore and Bundling

The useSyncExternalStore shim is imported directly in the main entry point, so it's always included in bundles even if you're using React 18. This adds roughly 600 bytes minified to your bundle size.

If you are using React 18 and would like to avoid that extra bundle cost, React-Redux now has a new /next entry point. This exports the exact same APIs, but directly imports useSyncExternalStore from React itself, and thus avoids including the shim. You can alias "react-redux": "react-redux/next" in your bundler to use that instead.

SSR and Hydration

React 18 introduces a new hydrateRoot method for hydrating the UI on the client in Server-Side Rendering usage. As part of that, the useSyncExternalStore API requires that we pass in an alternate state value other than what's in the actual Redux store, and that alternate value will be used for the entire initial hydration render to ensure the initial rehydrated UI is an exact match for what was rendered on the server. After the hydration render is complete, React will then apply any additional changes from the store state in a follow-up render.

React-Redux v8 supports this by adding a new serverState prop for <Provider>. If you're using SSR, you should pass your serialized state to <Provider> to ensure there are no hydration mismatch errors:

import { hydrateRoot } from 'react-dom/client'
</tr></table> 

... (truncated)

Commits
  • 81203e6 Release 8.0.0
  • d9464a7 Merge pull request #1902 from reduxjs/docs/v8-docs-updates
  • 885c1cc Update docs for v8 final
  • 1da5216 Merge pull request #1897 from reduxjs/bugfix/v8-merge-dispatchprop
  • 7765805 Port DT fix for dispatchProp arg in mergeProps
  • 80fc518 Release 8.0.0-rc.1
  • d771e26 Merge pull request #1895 from reduxjs/feature/v8-peerdeps
  • db94ad0 Widen React peer deps and add optional Redux dep for types
  • 6aefb35 Remove leftover .only
  • bf7f9b6 Merge pull request #1893 from kyletsang/fix-peerdeps
  • Additional commits viewable in compare view

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot dependabot bot requested review from a team and otto-the-bot as code owners April 17, 2022 14:17
@dependabot dependabot bot force-pushed the dependabot/npm_and_yarn/react-redux-8.0.0 branch from 1590a4f to 842f598 Compare April 17, 2022 14:37
@dependabot dependabot bot force-pushed the dependabot/npm_and_yarn/react-redux-8.0.0 branch from 842f598 to b8c0d13 Compare April 19, 2022 10:02
@dependabot dependabot bot force-pushed the dependabot/npm_and_yarn/react-redux-8.0.0 branch from b8c0d13 to e96beec Compare April 19, 2022 10:05
@dependabot dependabot bot force-pushed the dependabot/npm_and_yarn/react-redux-8.0.0 branch from e96beec to 2a21e0b Compare April 19, 2022 13:33
@dependabot dependabot bot force-pushed the dependabot/npm_and_yarn/react-redux-8.0.0 branch from 2a21e0b to 1bcd905 Compare April 19, 2022 13:41
@dependabot dependabot bot force-pushed the dependabot/npm_and_yarn/react-redux-8.0.0 branch from 1bcd905 to aa1622b Compare April 19, 2022 15:00
@atomrc
Copy link
Contributor

atomrc commented Apr 19, 2022

Issues filed on react-redux side reduxjs/react-redux#1909

@dependabot dependabot bot force-pushed the dependabot/npm_and_yarn/react-redux-8.0.0 branch from aa1622b to 23cc974 Compare April 19, 2022 16:47
dependabot bot and others added 2 commits April 21, 2022 07:16
Bumps [react-redux](https://github.com/reduxjs/react-redux) from 7.2.8 to 8.0.0.
- [Release notes](https://github.com/reduxjs/react-redux/releases)
- [Changelog](https://github.com/reduxjs/react-redux/blob/master/CHANGELOG.md)
- [Commits](reduxjs/react-redux@v7.2.8...v8.0.0)

---
updated-dependencies:
- dependency-name: react-redux
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
@atomrc atomrc force-pushed the dependabot/npm_and_yarn/react-redux-8.0.0 branch from 23cc974 to 268889a Compare April 21, 2022 07:16
@atomrc atomrc enabled auto-merge (squash) April 21, 2022 07:21
@codecov
Copy link

codecov bot commented Apr 21, 2022

Codecov Report

Merging #12853 (268889a) into dev (84c4950) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##              dev   #12853   +/-   ##
=======================================
  Coverage   38.34%   38.34%           
=======================================
  Files         554      554           
  Lines       20767    20767           
  Branches     4364     4364           
=======================================
  Hits         7964     7964           
  Misses      11866    11866           
  Partials      937      937           

@atomrc atomrc merged commit bb6fdde into dev Apr 21, 2022
@atomrc atomrc deleted the dependabot/npm_and_yarn/react-redux-8.0.0 branch April 21, 2022 07:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants