v8.0.4

This patch release fixes some minor TS types issues, and updates the rarely-used areStatesEqual option for connect to now pass through ownProps for additional use in determining which pieces of state to compare if desired.

Note: 8.0.3 was accidentally published without one of these fixes. Use 8.0.4 instead.

Changelog

TS Fixes

We've fixed an import of React that caused issues with the allowSyntheticDefaultImports TS compiler flag in user projects.

connect already accepted a custom context instance as props.context, and had runtime checks in case users were passing through a real value with app data as props.context instead. However, the TS types did not handle that case, and this would fail to compile. If your own component expects props.context with actual data, connect's types now use that type instead.

The ConnectedProps<T> type had a mismatch with React's built-in React.ComponentProps<Component> type, and that should now work correctly.

Other Changes

The areStatesEqual option to connect now receives ownProps as well, in case you need to make a more specific comparison with certain sections of state.

The new signature is:

{
  areStatesEqual?: (
    nextState: State,
    prevState: State,
    nextOwnProps: TOwnProps,
    prevOwnProps: TOwnProps
  ) => boolean
}

What's Changed

• Don't require allowSyntheticDefaultImports: true by @apepper in #1924
• Fixed type issue with ComponentProps from older @types/react by @Andarist in #1956
• connect: pass ownProps to areStatesEqual by @jspurlin in #1951
• Omit built-in context prop if user component props include context by @markerikson in #1958

Full Changelog: v8.0.2...v8.0.4

v8.0.3

This release was accidentally published without an intended fix - please use v8.0.4 instead

v7.2.9

This patch release updates the rarely-used areStatesEqual option for connect to now pass through ownProps for additional use in determining which pieces of state to compare if desired.

The new signature is:

{
  areStatesEqual?: (
    nextState: State,
    prevState: State,
    nextOwnProps: TOwnProps,
    prevOwnProps: TOwnProps
  ) => boolean
}

What's Changed

• connect: pass ownProps to areStatesEqual by @jspurlin in #1952

Full Changelog: v7.2.8...v7.2.9

v8.0.2

This patch release tweaks the behavior of connect to print a one-time warning when the obsolete pure option is passed in, rather than throwing an error. This fixes crashes caused by libraries such as react-beautiful-dnd continuing to pass in that option (unnecessarily) to React-Redux v8.

What's Changed

• Show warning instead of throwing error that pure option has been removed by @ApacheEx in #1922

Full Changelog: v8.0.1...v8.0.2

v8.0.1

This release fixes an incorrect internal import of our Subscription type, which was causing TS compilation errors in some user projects. We've also listed @types/react-dom as an optional peerDep. There are no runtime changes in this release.

What's Changed

• Add optional peer dependency on @types/react-dom by @Methuselah96 in #1904
• fix(ts): incorrect import of Subscription causes noImplicitAny error by @vicrep in #1910

Full Changelog: v8.0.0...v8.0.1

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

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'
import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'

const preloadedState = window.__PRELOADED_STATE__

const clientStore = configureStore({
  reducer: rootReducer,
  preloadedState,
})

hydrateRoot(
  document.getElementById('root'),
  <Provider store={clientStore} serverState={preloadedState}>
    <App />
  </Provider>
)

TypeScript Migration and Support

The React-Redux library source has always been written in plain JS, and the community maintained the TS typings separately as @types/react-redux.

We've (finally!) migrated the React-Redux codebase to TypeScript, using the existing typings as a starting point. This means that the @types/react-redux package is no longer needed, and you should remove that as a dependency.

Note Please ensure that any installed copies of redux and @types/react are de-duped. You are also encouraged to update to the latest versions of Redux Toolkit (1.8.1+) or Redux (4.1.2), to ensure consistency between installed types and avoid problems from types mismatches.

We've tried to maintain the same external type signatures as much as possible. If you do see any compile problems, please file issues with any apparent TS-related problems so we can review them.

The TS migration was a great collaborative effort, with many community members contributing migrated files. Thank you to everyone who helped out!

In addition to the "pre-typed" TypedUseSelectorHook, there's now also a Connect<State = unknown> type that can be used as a "pre-typed" version of connect as well.

As part of the process, we also updated the repo to use Yarn 3, copied the typetests files from DefinitelyTyped and expanded them, and improved our CI setup to test against multiple TS versions.

Removal of the DefaultRootState type

The @types/react-redux package, which has always been maintained by the community, included a DefaultRootState interface that was intended for use with TS's "module augmentation" capability. Both connect and useSelector used this as a fallback if no state generic was provided. When we migrated React-Redux to TS, we copied over all of the types from that package as a starting point.

However, the Redux team specifically considers use of a globally augmented state type to be an anti-pattern. Instead, we direct users to extract the RootState and AppDispatch types from the store setup, and create pre-typed versions of the React-Redux hooks for use in the app.

Now that React-Redux itself is written in TS, we've opted to remove the DefaultRootState type entirely. State generics now default to unknown instead.

Technically the module augmentation approach can still be done in userland, but we discourage this practice.

Modernized Build Output

We've always targeted ES5 syntax in our published build artifacts as the lowest common denominator. Even the "ES module" artifacts with import/export keywords still were compiled to ES5 syntax otherwise.

With IE11 now effectively dead and many sites no longer supporting it, we've updated our build tooling to target a more modern syntax equivalent to ES2017, which shrinks the bundle size slightly.

If you still need to support ES5-only environments, please compile your own dependencies as needed for your target environment.

Removal of Legacy APIs

We announced in 2019 that the legacy connectAdvanced API would be removed in the next major version, as it was rarely used, added internal complexity, and was also basically irrelevant with the introduction of hooks. As promised, we've removed that API.

We've also removed the pure option for connect, which forced components to re-render regardless of whether props/state had actually changed if it was set to false. This option was needed in some cases in the early days of the React ecosystem, when components sometimes relied on external mutable data sources that could change outside of rendering. Today, no one writes components that way, the option was barely used, and React 18's useSyncExternalStore strictly requires immutable updates. So, we've removed the pure flag.

Given that both of these options were almost never used, this shouldn't meaningfully affect anyone.

Changes

Due to the TS migration effort and number of contributors, this list covers just the major changes:

• Integrate TypeScript port by @markerikson in #1739
• Initial experimental React 18 compat prototyping by @markerikson in #1808
• Fix compatibility with React 18 strict effects by @markerikson in #1817
• Update to latest React 18 alpha dependencies by @markerikson in #1834
• Port remaining v7 typetests and improve v8 types by @markerikson in https://github.com/reduxjs/react-redux/p...

v8.0.0-rc.1

This release candidate updates our peer deps to accept all React versions with hooks (16.8+, 17+, and 18+), as well as React Native (0.59+). (The code already worked, but the peer deps needed to be updated to match behavior and install correctly.)

At this point, React-Redux v8 is feature-complete and stable. We still really want users to try this out and give us feedback before the final release! Barring any reported issues, we plan to release 8.0 as final within the next few days.

What's Changed

• Remove ts-ignore for initMergeProps by @Methuselah96 in #1891
• fix(deps): add optional peer deps into peerDependencies by @kyletsang in #1893
• Update peer deps for v8 by @markerikson in #1895

Full Changelog: v8.0.0-rc.0...v8.0.0-rc.1

v8.0.0-rc.0

This release candidate removes the DefaultRootState type left over from the @types/react-redux package. Additionally, we now have tests that exercise the serverState SSR behavior added in a previous beta.

At this point, React-Redux v8 is feature-complete and stable. We still really want users to try this out and give us feedback before the final release! Barring any reported issues, we plan to release 8.0 as final within the next few days.

Changelog

Removal of the DefaultRootState type

The @types/react-redux package, which has always been maintained by the community, included a DefaultRootState interface that was intended for use with TS's "module augmentation" capability. Both connect and useSelector used this as a fallback if no state generic was provided. When we migrated React-Redux to TS, we copied over all of the types from that package as a starting point.

However, the Redux team specifically considers use of a globally augmented state type to be an anti-pattern. Instead, we direct users to extract the RootState and AppDispatch types from the store setup, and create pre-typed versions of the React-Redux hooks for use in the app.

Now that React-Redux itself is written in TS, we've opted to remove the DefaultRootState type entirely. State generics now default to unknown instead.

Technically the module augmentation approach can still be done in userland, but we discourage this practice.

SSR Tests

We added a serverState prop to <Provider> in beta.2 to resolve hydration mismatch issues, but had only done some quick hands-on testing locally. We now have tests that cover that use case.

What's Changed

• Remove DefaultRootState type by @markerikson in #1887
• Add SSR test for serverState behavior by @markerikson in #1888
• Cleanup internal types in selectorFactory.ts by @Methuselah96 in #1889

Full Changelog: v8.0.0-beta.4...v8.0.0-rc.0

v8.0.0-beta.4

This beta release switches the default entry point to use the useSyncExternalStore shim for compatibility with React 16.8+, and switches to a "/next" alternate entry point without the shim.

At this point, React-Redux v8 is feature-complete and stable. We still really want users to try this out and give us feedback before the final release! We'd also like to add some additional tests around SSR behavior.

We would like to release v8 as final within the next couple weeks now that React 18 is available.

Changelog

useSyncExternalStore Shim Usage

React 18 adds the new useSyncExternalStore API. In previous betas, the plan was that React-Redux v8 would have a hard requirement on React 18. As a fallback, the betas provided a "/compat" entry point that included the uSES "shim", a userland implementation from the React team that provided compatibility with earlier React versions back to 16.8. That adds a few hundred bytes to the bundle size, so we wanted to keep the default size smaller.

However, React Native will not support React 18 until the "New Architecture" is done. So, release React-Redux v8 with a hard React 18 requirement would immediately start breaking RN usage.

After discussion with the React team, we've flipped the default behavior in v8. Now, the default entry point does rely on the uSES shim. This increases final bundle size slightly (about 600b minified compared to v7.x). However, this ensures that React-Redux v8 is compatible with React 16.8+/17 out of the box, enabling users to upgrade to v8 right away even if they aren't using React 18. It also ensures continued RN compatibility.

For users who would like to strip out the shim, this release switches to having a "/next" entry point that directly imports useSyncExternalStore from React, with no shim. You can alias "react-redux": "react-redux/next" in your bundler to use that instead.

What's Changed

• Remove unused useCallback import by @bobaekang in #1883
• Swap useSyncExternalStore shim behavior and update React deps by @markerikson in #1884

Full Changelog: v8.0.0-beta.3...v8.0.0-beta.4

v7.2.8

This release fixes a bug in the 7.x branch that caused <Provider> to unsubscribe and stop updating completely when used inside of React 18's <StrictMode>. The new "strict effects" behavior double-mounts components, and the subscription needed to be set up inside of a useLayoutEffect instead of a useMemo. This was previously fixed as part of v8 development, and we've backported it.

Note: If you are now using React 18, we strongly recommend using the React-Redux v8 beta instead of v7.x!. v8 has been rewritten internally to work correctly with React 18's Concurrent Rendering capabilities. React-Redux v7 will run and generally work okay with existing code, but may have rendering issues if you start using Concurrent Rendering capabilities in your code.

Now that React 18 is out, we plan to finalize React-Redux v8 and release it live within the next couple weeks. Per an update yesterday in the "v8 roadmap" thread, React-Redux v8 will be updated in the next couple days to ensure support for React 16.8+ as part of the next beta release. We would really appreciate final feedback on using React-Redux v8 beta with React 18 before we publish the final version.

Full Changelog: v7.2.7...v7.2.8