React-Redux Roadmap: v6, Context, Subscriptions, and Hooks

Update: React-Redux v7 final is now available!

We’ve just published v7 final, with the changes covered in this thread. Upgrade your apps today!

Back in December, we released React-Redux version 6.0. This release featured a major rearchitecture of the implementations for <Provider> and connect, centered around our use of React’s context API.

We put the pre-release builds through extensive tests, including our existing unit test suite and multiple performance benchmark scenarios. We also requested early adopter feedback on beta versions. Based on all that information, we determined that v6 was ready for public release, and published it.

I think most library maintainers would agree that the best way to guarantee getting bug reports is to publish a new major version, because A) that means the entire community is about to start using the new code, and B) it’s impossible for a maintainer to anticipate every way that the library is being used. That’s definitely been true with React-Redux version 6.

Version 6 does work as intended, and many of our users have successfully upgraded from v5 to v6, or started new projects with v6. However, we’ve seen a number of concerns and challenges that have come up since v6 was released. These relate to both the current behavior of v6 and its API, as well as future potential changes such as the ability to ship official React hooks that use Redux.

In this issue, I want to lay out a description of the changes we made in v6 and why we made them, the challenges we are currently facing, the constraints that potential solutions need to conform to, and some possible courses of action for resolving those challenges.

TL;DR:

• v6 switched from direct store subscriptions in components, to propagating store state updates via createContext
• It works, but not as well as we’d hoped
• React doesn’t currently offer the primitives we need to ship useRedux() hooks that rely on context
• Based on guidance from the React team, we’re going to switch back to using direct subscriptions instead, but need to investigate an updated way to re-implement that behavior
• As part of that, we need to improve our tests and benchmarks to ensure we’re covering more use cases from throughout the community
• Our ability to ship public hooks-based APIs depends on switching back to subscriptions, and how we update connect may require a major version bump.
• We need volunteers and contributions from the React-Redux community to make all this happen!

Implementation Changes in Version 6

In my blog post The History and Implementation of React-Redux, I described the technical changes we made from v5 to v6, and why we made them. Summarizing those changes:

• v5 and earlier:
  • The store instance was put into legacy context
  • Each connected component instance was a separate subscriber to the Redux store
  • Because components subscribed directly, they could also accept a store instance as a prop named store, and use that instead of the instance from context
• In v6:
  • The current Redux store state is propagated via React’s new createContext API
  • Only <Provider> subscribes to the store - the components just read the store state from context
  • Since components don’t subscribe directly, passing store as a prop is meaningless and was removed

We made these changes for several reasons:

• Legacy context will eventually be removed, and can cause problems when used side-by-side with the new context API
• The React team has warned that React’s upcoming “Concurrent Mode” and “Suspense” capabilities will cause many existing state patterns to break or behave unpredictably. By putting the store state itself into context, React ensures the entire component tree sees the same state value consistently, and therefore React-Redux would hopefully would be more compatible with Concurrent Mode when it comes out.
• v5 had to specifically implement custom tiered subscription logic to enforce top-down updates in order to fix “zombie child” bugs (where a child component subscribes before its parent, has its data deleted from the store, and then tries to read that data before the parent stops rendering it). Context updates top-down by default as React renders, allowing us to remove our own custom code for this issue.

Challenges with v6

Performance

During the development of v6, we put together a performance benchmarks suite that we could use to compare the behavior of different builds of React-Redux. These benchmarks are artificial stress tests that don’t necessarily match real-world app setups, but they at least provide some consistent objective numbers that can be used to compare the overall behavior of builds to keep us from accidentally shipping a major performance regression.

Our comparisons showed that v6 was generally slower than v5 by different amounts in different scenarios, but we concluded that real-world apps would probably not experience any meaningful differences. That seems to have been true for most users, but we have had several reports of performance decreases in some apps.

Fundamentally, this is due to how v6 relies on context for propagating state updates. In v5, each component could run its own mapState function, check the results, and only call this.setState() if it knew it needed to re-render. That meant React only got involved if a re-render was truly necessary. In v6, every Redux state update immediately causes a setState() in <Provider> at the root of the tree, and React always has to walk through the component tree to find any connected components that may be interested in the new state. This means that v6 ultimately results in more work being done for each Redux store update. For usage scenarios with frequent Redux store updates, this could result in potential slowdowns.

store as Prop

We removed the ability to pass a prop named store to connected components specifically because they no longer subscribe to stores directly. This feature had two primary use cases:

• Passing store instances to connected components in tests without needing to wrap them in a <Provider>
• Rare situations where a specific component needed to subscribe to a different store than the rest of the application component tree around it

Our general guidance for the first use case was to always wrap components in <Provider> in tests. We tried to provide a solution for the second use case by allowing users to pass custom context instances to both <Provider> and connected components.

However, since the release of v6, we’ve had several users express concerns that the removal of store as a prop breaks their tests, and that there are specific problems with trying to use the combination of Enzyme’s shallow() function with a <Provider> (and React’s new context API in general).

Context API Limitations

At first glance, React’s new createContext API appears to be perfectly suited for the needs of a library like React-Redux. It’s built into React, it was described as “production-ready” when it was released, it’s designed for making values available to deeply-nested components in the tree, and React handles ordering the updates in a top-down sequence. The <Context.Provider> usage even looks very similar to React-Redux’s <Provider>.

Unfortunately, further usage has shown that context is not as well suited for our use case as we first thought. To specifically quote Sebastian Markbage:

My personal summary is that new context is ready to be used for low frequency unlikely updates (like locale/theme). It’s also good to use it in the same way as old context was used. I.e. for static values and then propagate updates through subscriptions. It’s not ready to be used as a replacement for all Flux-like state propagation.

React-Redux and Hooks

In addition to concerns about performance and state update behaviors, the initial release of the React Hooks API will not include a way to bail out of updates triggered by a context value update. This effectively blocks React-Redux from being able to ship some form of a useRedux() hook based on our current v6 implementation.

To again quote Sebastian:

I realize that you’ve been put in a particularly bad spot because of discussions with our team about concurrent mode. I apologize for that. We’ve leaned on the use of context for propagation which lead you down the route of react-redux v6. I think it’s generally the right direction but it might be a bit premature. Most existing solutions won’t have trouble migrating to hooks since they’ll just keep relying on subscriptions and won’t be concurrent mode compatible anyway. Since you’re on the bleeding edge, you’re stuck in a bad combination of constraints for this first release. Hooks might be missing the bailout of context that you had in classes and you’ve already switched off subscriptions. 😦

I’ll pull out one specific sentence there for emphasis:

I think [v6’s use of context is] generally the right direction but it might be a bit premature.

Constraints

Whatever solutions we come up with for these challenges need to fit within a variety of overlapping constraints.

Performance Should Match or Improve vs v5

Ideally, v6 should be at least as fast as v5, if not faster. “Faster”, of course, is entirely dependent on what metrics we’re measuring, and how we’re measuring them.

Handle Use Cases for store as Prop

We need to support the use cases that were previously handled by passing a store directly as a prop to connected components. As part of that, we should ensure that we have tests that cover these usages.

Future React Compatibility

We have some idea what the potential concerns are around React’s future Concurrent Mode and Suspense capabilities, but it would help to have some concrete examples that we can use to ensure we’re either not breaking application behavior, or at least can help us quantify what the potential breakages are.

Quoting Dan Abramov:

We need to be clear that there are several “levels” of compatibility with new features of React. They’re not formalized anywhere yet but a rough sketch for a library or technique X could be:

1. X breaks in sync mode
2. X works in sync mode but breaks in concurrent mode
3. X works in concurrent mode but limits its DX and UX benefits for the whole app
4. X works in concurrent mode but limits its UX benefits for the whole app
5. X works in concurrent mode but limits its DX and UX benefits for features written in X
6. X works in concurrent mode but limits its UX benefits for features written in X
7. X works in concurrent mode and lets its users take full advantage of its benefits

This is not a strict progression and there’s a spectrum of tradeoffs. (For example, maybe there is some temporary visual inconsistencies such as different like counts, but no crashes are guaranteed.)

But we need to be more precise about where React Redux is, and where it aims to be.

At a minimum, we should ensure that React-Redux does not cause any warnings when used inside a <StrictMode> component. That includes use of semi-deprecated lifecycle methods like componentWillReceiveProps (which was used in v5).

Don’t Re-Introduce “Zombie Child” Problems

Up through v4, we had reports of a bug that could happen when children subscribed before parents. At a technical level, the actual issue was:

• combining stale ownProps with new state in mapStateToProps()
• running mapStateToProps() for a component that will be unmounted later in the overall render cycle, combined with a failure to handle cases where the values needed from the store might not exist

As an example, this could happen if:

• A connected list immediately rendered connected list items
• The list items subscribed before the parent list
• The data for a list item was deleted from the store
• The list item’s mapState then ran before the parent had a chance to re-render without that child
• The mapState tried to read nested state without safely checking to see if that data existed first

v5 specifically introduced an internal Subscription class that caused connected components to update in a tiered approach, so that parents always updated before children. We removed that code in v6, because context updates top-down already, so we didn’t need to do it ourselves.

Whatever solutions we come up with should avoid re-introducing this issue.

Allow Shipping Redux Hooks

The React community as a whole is eagerly awaiting the final public release of React Hooks, and the React-Redux community is no exception. Redux users have already created a multitude of unofficial “Redux hooks” implementations, and have expressed a great deal of interest in an official set of hooks-based APIs as part of React-Redux.

We absolutely want to ship our own official Redux hooks as soon as possible. Whatever changes we decide on need to make that feasible.

Potentially Use Hooks in connect

When hooks were announced, I immediately prototyped a proof of concept that reimplemented connect using hooks internally. That simplified the connect implementation dramatically.

I’d love to use hooks inside React-Redux itself, but that would require bumping our peer dependency on React from the current value of 16.4 in v6, to a minimum of 16.8. That would require a corresponding major version bump of React-Redux to v7.

That’s a potential option, but I’d prefer not to bump our own major version if we can avoid it. It should be possible to ship a useRedux() as part of our public API as a minor 6.x version, and leave it up to the user to make sure they’ve got a hooks-capable version of React if they want to import that hook. Then again, it’s also possible that a hooks-based version of connect would be necessary to solve the other constraints.

Continue to Work with Other Use Cases

The broader React-Redux ecosystem has updated itself to work with v6. Some libraries have had to change from using the withRef option to forwardRef. Other libraries that were accessing the store out of the (undocumented private) legacy context have switched to accessing the store out of our (still private) ReactReduxContext instance.

This has also brought up other semi-niche use cases that we want to support, including having connect work with React-Hot-Loader, and support for dynamically updating reducers and store state in SSR and code-splitting scenarios.

The React-Redux community has built some great things on top of our baseline capabilities, and we want to allow people to continue to do so even if we don’t explicitly support everything ourselves.

Courses of Action

So here’s where the rubber meets the road.

At the moment, we don’t have specific implementations and solutions for all those constraints. We do have some general outlines for some tasks and courses of action that will hopefully lead us towards some working solutions.

Switch connect Back to Direct Subscriptions

Based on guidance from the React team, the primary thing we should do at this point is switch connect back to using direct subscriptions.

Unfortunately, we can’t just copy the v5 implementation directly into the v6 codebase and go with it as-is. Even ignoring the switch from legacy context to new context, v5 relied on running memoized selectors in componentWillReceiveProps to handle changes to incoming props, and then returning false in shouldComponentUpdate if necessary. That caused warnings in <StrictMode>, which we want to avoid.

We need to design a new internal implementation for store subscription handling that satisfies the listed constraints. We’ve done some early experiments, but don’t have any specific approaches yet that we can say are the “right” way to do it.

We do actually already put the store instance into createContext, so nothing needs to change there. The specific values we put into context are not considered part of our public API, so we can safely remove the storeState field from context.

Bringing back direct subscriptions does mean that we can probably bring back the ability to pass store as a prop directly to connected components. That should hopefully resolve the concerns about testing and isolated alternate-store usage, because it’s the same API that solved those use cases previously.

Expand Test Suite for More Use Cases

We currently have a fairly extensive unit test suite for connect and <Provider>. Given the discussions and issues we’re facing, I think we need to expand that suite to make sure we’re better covering the variety of use cases the community has. For example, I’d like to see some tests that do Enzyme shallow rendering of connected components, mock (or actual) SSR and dynamic loading of slice reducers, and hopefully tests or apps that show the actual problems we might face in a Concurrent Mode or Suspense environment.

Consider Marking Current Implementation as Experimental

The v6 implementation does work, and there may be people who prefer to use it. Rather than just throw it away, we could potentially keep it around as a separate entry point, like import {connect, Provider} from "react-redux/experimental".

Improve Benchmarks Suite

Our current benchmarks are somewhat rudimentary:

• They only measure raw page FPS, no other metrics
• Measuring FPS requires cranking up the number of connected components and update frequency to arbitrarily high levels until the FPS starts to drop below 60
• The current benchmark scenarios are sorta meant to represent certain use cases, but are probably not good representations of real-life behavior

I would really like our benchmarks to be improved in several ways:

• Capture more metrics, like time to mount a component tree, time to complete a single render pass for an entire tree, and breaking down the time spent in different aspects of a single update cycle (running the reducer, notifying subscribers, running mapState functions, queuing updates, wrappers re-rendering, etc).
• We should see how the benchmarks behave when used with ReactDOM’s unstable_batchedUpdates API, to see how much of a difference that makes in overall performance
• Our benchmarks currently only include web usage. I would like to be have some React Native benchmarks as well.
• We should have additional benchmark scenarios for more use cases, like apps with connected forms, a large tree of unconnected components with only leaf components being connected, etc.

In general, we need to better capture real-world behavior.

Officially Support Batched React Updates

ReactDOM has long included an unstable_batchedUpdates API. Internally, it uses this to wrap all event handlers, which is why multiple setState() calls in a single event handler get batched into a single update.

Although this API is still labeled as “unstable”, the React team has encouraged us to ship an abstraction over this function officially as part of React-Redux. We would likely do this in two ways:

• Export a function called batch that can be used directly by end users themselves, such as wrapping multiple dispatches in a thunk
• Export a ReactReduxEnhancer that would wrap dispatches in unstable_batchedUpdates, similar to how tappleby/redux-batched-subscribe works.

It’s not yet clear how much this would improve overall performance. However, this may hopefully act as a solution to the “zombie child component” problem. We need to investigate this further, but the React team has suggested that this would be a potential solution.

Currently, ReactDOM and React Native apparently both separately export their own versions of unstable_batchedUpdates, because this is a reconciler-level API. Since React-Redux can be used in either environment, we need to provide some platform abstraction that can determine which environment is being used, and import the method appropriately before re-exporting it. This may be doable with some kind of .native.js file that is picked up by the RN build system. We might also need a fallback in case React-Redux is being used with some other environment.

Hooks

We can’t create useRedux() hooks for React-Redux that work correctly with v6’s context-based state propagation, because we can’t bail out of updates if the store state changed but the mapState results were the same. However, the community has already created numerous third-party hooks that rely on direct store subscriptions, so we know that works in general. So, our ability to ship official hooks is dependent on us first switching back to direct store subscriptions in connect, because both connect and any official hooks implementation need to share the same state propagation approach.

There’s a lot of bikeshedding that can be done about the exact form and behavior of the hooks we should ship. The obvious form would be to have a direct equivalent of connect, like useRedux(mapState, mapDispatch). It would also be reasonable to have separate hooks like useMapState() and useMapDispatch(). Given the plethora of existing third-party hooks libs, we can survey those for API and implementation ideas to help determine the exact final APIs we want to ship.

In theory, we ought to be able to ship these hooks as part of a 6.x minor release, without requiring that you have a minimum hooks-capable version of React. That way, users who are still on React <= 16.7 could conceivably use React-Redux 6.x, and it will work fine as long as they don’t try to actually use the hooks we export.

Long-term, I’d probably like to rework connect to be implemented using hooks internally, but that does require a minimum peer dependency of React 16.8. That would be a breaking change and require a major version bump for React-Redux. I’d like to avoid that on general principle. But, if it turns out that a hooks-based connect implementation is actually the only real way to satisfy the other constraints, that may turn out to be necessary.

Requests for Community Help

There’s a lot of stuff in that list. We need YOUR help to make sure React-Redux works well for everyone!

Here’s how you can help:

• Help us come up with the right approach for using direct subscriptions in connect, including experimenting with implementations yourself, and giving us feedback on any test releases we publish.
• Improve our benchmarks suite and test suite by describing use cases that aren’t currently covered, adding new tests and benchmarks to cover additional scenarios, and updating the benchmarks suite to capture additional metrics
• We need to determine exactly what limitations React-Redux faces with Concurrent React. The React team has some rough examples of concurrent React usage - porting those to use Redux would help show what specific problems might happen.
• Implement our support for batched updates, and make sure it works in different environments.
• Discuss what our future hooks-based APIs should look like, including rounding up the existing third-party libs to help guide the API design.

We can start with some initial discussion in this issue, but I’ll probably try to open up some specific issues for these different aspects in the near future to divide up discussion appropriately.

Final Thoughts

There’s a lot of great things ahead for React. I want to make sure that React and Redux continue to be a great choice for building applications together, and that Redux users can take advantage of whatever capabilities React offers if at all possible.

The React-Redux community is large, growing, smart, and motivated. I’m looking forward to seeing how we can solve these challenges, together!

[markerikson]

Awright, having heard the pleas of the masses, and following the advice of the ever-wise @timdorr:

I have published an alpha build as a temporary fork under the name @acemarke/react-redux.

The alpha build is available as @acemarke/react-redux@next, currently at version 7.0.0-alpha.1.

I suspect that switching over to this would cause some peer dep warnings, but at least it’s something you can install off of NPM.

Please try it out and let us know how it behaves in comparison to v5 and v6 in real-world apps!

note: thanks to @Jessidhia for pointing out that you can do:

yarn add react-redux@npm:@acemarke/react-redux@next

which should work okay to skip the peer dep warnings.

Unofficial Release Notes

• This does require a minimum React peer dep version of ^16.8.2, because hooks are a requirement for the implementation.
• There’s currently a hardcoded dependency on react-dom so we can use unstable_batchedUpdates. So, this won’t work with React Native right now. Supposedly we can work around this by having some kind of a “platform.js” file that handles importing stuff from RN instead.

[markerikson]

Folks, it’s time to finally bring this issue to a close.

Because I’ve just published React-Redux v7 final!!!

Go install it 😃

Nice to know that this is done and there’s no other long, contentious, complex API design threads to figure out after this.

oh waitaminute