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

[markerikson]

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()
• runningmapStateToProps() 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!

[Jessidhia]

I'm not really sure the batchedUpdates strategy alone can deal with the update bailout performance issue.

It would allow react-redux to move the bailout to the shouldComponentUpdate phase instead of having connect() return memoized children to skip child reconciliation, but it'd still trigger a render pass on every single connect() HOC and a full React root traversal (even if it is 100% bailouts), so I estimate the cost to only be marginally smaller than v6.0's approach. It would allow for a potential hooks API to bail out, though, which would be a usability gain at least.

I still have some ideas for things to try without breaking API, though.

[markerikson]

I'm open to experimenting with as many variations on implementation approaches as we can come up with :) All the more reason to have additional tests that can quantify and express the additional constraints we need to meet, beyond what we have in the repo now.

[dschinkel]

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

Thank you!!

[gaearon]

FWIW I don’t see anything preventing us from adding provider support to shallow renderer. If that’s the concern about testing.

[gaearon]

@jessidhia The batchedUpdates thing is more about fixing the “zombie child”. It’s the idiomatic React solution for always traversing from the top. It can also improve perf outside event handlers but avoiding the bad ordering is the main motivation.

[thomschke]

Please don't forget to support immutable data structure libraries like immutable-js.

They have a special equality check like is() and we need a way to define a custom comparison function for connect or useRedux.

see https://github.com/facebook/react/pull/14569#issuecomment-458864678

[Ephem]

This is a fantastic writeup, sincerely thank you so much for your hard work @markerikson! 🙌

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.

I do agree with this. That said, this will technically break some implementations of dynamically injected reducers in v6 since they currently have to rely on those private APIs, so I was glad to see you explicitly mention that issue. 😀 I don't think any of the "big ones" are using storeState for their implementation currently though (at least not dynostore or dynamic-modules I think) so shouldn't be a huge issue.

I really agree with a test-based approach here, if I can find the time I'll try to contribute some tests focusing on SSR.

[vincentjames501]

Just wanted to say I'm excited about this roadmap and feel it's the correct direction forward until both context performance for large stores with frequent updates and bailout of useContext is added/supported. I'd love to see a compilation of all the hooks approaches the community has developed thus far and review in a centralized place! Awesome work @markerikson , the community greatly appreciated your work!

[markerikson]

@vincentjames501 : yup, agreed.

A couple months ago, @adamkleingit put together this list of existing Redux hooks libs:

https://twitter.com/adamklein500/status/1072457324932067329

Collating that list of existing Redux hooks libs is absolutely something that someone else besides me can do, and would really help (like, a Google Docs spreadsheet or something like that). Links, summaries, API comparisons, etc.

Others not in that list as I run across them:

https://github.com/animify/useRestate

[esamattis]

It's really interesting to me that you mention using setState batching as a potential solution because that's the way I originally solved the zombie/tearing issue for react-redux in the #99 PR. I guess things can come around sometimes :)

That PR didn't actually use the unstable_batchedUpdates itself but one could enable it via the redux-batched-updates middleware in order to avoid the zombie child issue.

---

In the @gaearon's "React as a UI Runtime" article he explains how and why React uses batching for event handlers

https://overreacted.io/react-as-a-ui-runtime/#batching

This really resonates with me because the reason for it seems to be basically same as why Redux would need it.

And using it the issue is pretty easy to solve. Inspired by this I created my own redux-hooks implementation that does not suffer from the zombie issue:

https://github.com/epeli/redux-hooks

It works by using static context which contains the store reference and an array reference. When the useReduxState() is called it appends an update() function into the array by mutating it (context values are never updated in this implementation). Only the <HooksProvider> subscribes to the store. On a store update it just iterates over the update function and calls them inside the unstable_batchedUpdates callback:

https://github.com/epeli/redux-hooks/blob/f26938076f4a253a83fef4823cfbcd5b2f52fc01/src/redux-hooks.tsx#L26-L30

Here's a simple todoapp using this implementation

Codesandbox: https://codesandbox.io/s/github/epeli/typescript-redux-todoapp/tree/hooks Github: https://github.com/epeli/typescript-redux-todoapp/tree/hooks

I really cannot comment about the performance of this since I just put it together but I don't think there's any reason why it couldn't be good. This implementation now just does the basic performance optimization by bailing out if mapState does not produce new value (shallow equal check).

I'd be super interested hearing any feedback on this. Even just for the internal hooks usage. This is the first thing I've ever written with hooks.

---

EDIT: Oh, and this not a hooks specific way to implement this. The same method would work for the regular HOC connect(). I just wanted to play with hooks a bit (and I don't think there are any other zombie free implementations of redux hooks out there).

[alexreardon]

@markerikson ❤️

To weigh in slightly: for react-beautiful-dnd we have not moved to react-redux v6 for performance reasons https://david-dm.org/atlassian/react-beautiful-dnd

Here was my initial performance investigations of the new context api for propigating updates: https://github.com/facebook/react/issues/13739

[solkimicreb]

Hi everyone!

I just migrated one of my libs (which has a pretty extensive test coverage) to use unstable_batchedUpdates and I can confirm two things.

• Exposing two builds - one .js and one .native.js - and adding the .js build as the main to package.json does not work for react-native. Exposing a single build with extra platform chunks (platform.js and platform.native.js) and requiring platform from the main chunk does work for both react-dom and react-native however. You can check the implementation here. (Check the src and the platforms folders and the scripts/build.js file.)

• unstable_batchedUpdates does solve the zombie child issues. I used to have extra logic to reorder setState calls in a single sync batch to guarantee a parent-child order in the renders. I could totally remove this after I wrapped sync batches with unstable_batchedUpdates which seems to order re-renders in a parent-child order even if the setState calls are in a different order (subscription order I assume).

I hope these help a bit.

[dmytro-lymarenko]

https://github.com/facebook/react/releases/tag/v16.8.0

[markerikson]

I've done some early experimenting the last couple evenings with trying to rework the guts of connect. My utterly hacked-up WIP experimental code is here:

https://github.com/reduxjs/react-redux/tree/connect-subscription-experiments

A few notes:

• We can't reuse the same subscription init approach we did in v5, because that relied on having access to this.context.store in the constructor. With createContext, there's no way to grab the store reference that early, because you only have access to it in render(). The only options there are to have a wrapper component whose only job is to extract whatever you need from context and pass it to a child component as a prop that does the real work, or use static contextType. I don't think either of those are workable here, because a wrapper adds more levels of nesting (probable perf hit) and v6 allows the user to customize what context instance they use at runtime (so we can't declare/assign that statically).
• So, just for kicks, I've opted to jump right into experimenting with using hooks directly inside of connect, and writing direct subscription handling logic. I briefly considered trying to write a useRedux() hook first, and then use that in connect, but decided it was better to get connect working right first. We can extract that into a working hook later.
• My first attempt passed the tests, but did all the derivation in the function component itself. A quick perf benchmark showed it was horribly slow, only 50% the speed of v5 (and slower than v6). Basically, I reinvented new context, badly.
• My current WIP passes most tests, but the ones it doesn't pass are concerning. I think that batched updates are handling the "zombie child" issue, but in the case of children subscribing first, child props are being recalculated based on existing wrapperProps when the store updates, because the parent hasn't re-rendered itself yet and passed down new props. This makes me think we'd have to bring back something similar to the Subscription class we had in v5 to enforce top-down update behavior for that case.

FWIW, this is just me having hacked on stuff for a couple evenings - I'm just throwing out what I've tried and thought of so far.

[Ephem]

Great work, I will try to dive deeper into it when I can, but I immediately had one question. Since connect is a HOC that returns a new component for each call, and custom context can only be configured in that outer function call, would it not be possible to use static contextType after all? Only way to change that context would be to call connect again to return a new component, so isn’t it static in that sense?

Haven’t checked your code or any details so might well be missing something which is why I’m asking. Might try to play with this tomorrow. :)

[markerikson]

No, the v6 implementation specifically supports passing a custom context instance as a prop directly to a connected component, regardless of whether or not you also passed a custom context instance as an option when calling connect():

https://github.com/reduxjs/react-redux/blob/ab7745062b2249e3914400452a9c114b2007e969/src/components/connectAdvanced.js#L245-L256

This was primarily intended to act as an alternative for the removal of the "store as prop" ability, so that you could have an isolated portion of the subtree reading from a different store than the rest of the app if desired.

[Ephem]

Thanks for explaining, I had somehow missed that part. Certainly makes it trickier. :/

[Ephem]

Using context from props does indeed seem like it necessarily adds another wrapper if not using hooks. I guess one approach to handle it with backwards compat might be to check if context-prop exists, not set up subscription in that case and render extra wrapper only then (+handle prop-change case..). Seems tricky and possibly verbose though.

Good performance in default case or custom context via connect, extra wrapper only if context is defined as prop? Most common case for that is tests as I understood it? Just brainstorming. :)

[esamattis]

Could explain a little or point to a test of this "children first" scenario?

• I think that batched updates are handling the "zombie child" issue, but in the case of children subscribing first, child props are being recalculated based on existing wrapperProps when the store updates, because the parent hasn't re-rendered itself yet and passed down new props.

I'd like to take a look at it.

[markerikson]

I don't think we currently have tests that explicitly are supposed to check for that, but the tests that are failing on my branch right now seem to mostly represent that scenario.

[Ephem]

Just to demonstrate what I meant by "wrap only if context exists in props" I refactored connectAdvanced in v6 to use static contextType, source can be found here. It passes all tests.

I choose v6 as basis because it was easier/quicker to demonstrate the approach there. A real solution would need to handle prop-changes as well. If it would be helpful I could give a shot to refactoring the 5.x-branch to use new context (and add support for context as prop) with this approach, which would have to be more complete since it has side-effects based on context.

This only addresses one of the problems you mentioned of course and it isn't necessarily a good solution even for that, but it is the only approach I can think of that avoids a breaking change and doesn't degrade performance for the common case.

[esamattis]

Little bit re-familiarized myself with the code base again (haven't really kept up since 3.x) and having implemented unofficial redux hooks I kinda feel that it might not make sense to build connect() on top of the public redux hooks api. They kinda have different requirements. More on that later. It seems that it would make the most sense to implement a common Provider component for the connect() and the hooks api but otherwise have different code bases. Common provider would be required to be able to mix values from connect() and the hooks without having tearing issues.

Having played a bit my unofficial redux hooks api it's pretty clear that constraints that are present with the connect() are not with hooks. For examle with connect() you must provide everything in a single mapState call and even merge dispatch mapping in to the same result object. With hooks it's no problem to have multiple mapStates and mapDispatchs within the same component.

Example: https://github.com/epeli/typescript-redux-todoapp/blob/1062e1b444654add6ea409918b355a583fd73dd6/src/components/Main.tsx#L18-L20

For this reason I think the hooks api should not mimic the connect(). We can get away with a much simpler api which is more powerful. Creating that api should not be constrained by the connect() baggage.

Also ability to return a function from mapState for advanced scenarios is not required since you can just use the useMemo hook pretty easily. Here's a reselect example:

const selectUser = useMemo(
    () =>
        createSelector(
            state => state.users[props.userId],
            user => somethingExpensive(user),
        ),
    [props.userId],
);

const modifiedUser = useMapState(selectUser);

The deps array ensures that the cache is busted when required

I wrote here how some of these advanced scenarios could be handled with hooks

https://github.com/epeli/redux-hooks/blob/master/docs/optimizing.md

I find especially the useSelect hook interesting if we are interested in completely new APIs for react-redux.

[esamattis]

Another interesting observation is that useMapState hook might get away with just a === check instead of doing shallow equal check because you can use it multiple times for different parts of the state you need. Shallow equal check is pretty much a workaround for the fact that connect() must always return a new object after all.

Also doing just the triple equals check would be closer to how the setState hook works.

[markerikson]

Let's move the actual hooks API design discussion over to #1179 .

[markerikson]

Well, good news and bad news.

The good news is that after hacking on stuff the last couple evenings, I managed to come up with a hooks-based connect implementation that uses direct store subscriptions, based on the Subscription class we had from v5.

The bad news: it ain't very fast.

+---------------------------------
¦ Version             ¦ Avg FPS ¦ 
+---------------------+---------+-
¦ 5.1.1               ¦ 37.91   ¦ 
+---------------------+---------+-
¦ 6.0.0               ¦ 28.23   ¦ 
+---------------------+---------+-
¦ 6.1.0-hooks-9c3bcb7 ¦ 23.86   ¦ 
+---------------------+---------+-
¦ 6.1.0-hooks-f8c506e ¦ 16.41   ¦ 
+---------------------------------

f8c506e was an earlier iteration that basically reinvented context. 9c3bcb7 is what I just completed.

With the usual caveats that these are artificial stress tests, it's pretty clear that these two attempts did not perform anywhere near as fast as v5 did. :(

Here's the very hacky implementation if anyone wants to look at it.

[vincentjames501]

Awesome work, Mark! Can you post instructions on how to run the synthetic benchmarks?

[markerikson]

I wish it were "awesome". It runs, but it's even slower than 6.0 is.

I just made a small tweak to use useLayoutEffect for the subscriptions instead of useEffect. May have made a tiny difference, but not enough to matter.

As for the benchmarks, see https://github.com/reduxjs/react-redux-benchmarks . You ought to be able to clone that, pull my branch, build React-Redux, drop the react-redux.min.js over in the benchmarks repo (with a distinct file name), and run things to replicate the approximate results.

Actual FPS values may vary, and I notice them varying from run to run myself. It's more about the relative results between the versions.

[markerikson]

Soooo...

I may be on to something here.

I just made a very small change, and I got these results:

+---------------------------------
¦ Version             ¦ Avg FPS ¦ 
+---------------------+---------+-
¦ 5.1.1               ¦ 34.61   ¦ 
+---------------------+---------+-
¦ 6.0.0               ¦ 23.53   ¦ 
+---------------------+---------+-
¦ 6.1.0-hooks-84feb72 ¦ 19.69   ¦ 
+---------------------+---------+-
¦ 6.1.0-hooks-9c3bcb7 ¦ 20.22   ¦ 
+---------------------+---------+-
¦ 6.1.0-hooks-f8c506e ¦ 15.58   ¦ 
+---------------------+---------+-
¦ 6.1.0-hooks-memo    ¦ 38.12   ¦ 
+---------------------------------

Notice the results for 5.1.1 vs 6.1.0-hooks-memo :)

I only changed one line between 84f3b72 and that build. What was it?

-const Connect =  ConnectFunction;
+const Connect = pure ? React.memo(ConnectFunction) : ConnectFunction;

That seems to have made a huge impact, and I'm seeing the same results consistently as I re-run the benchmarks. This latest commit is actually faster than 5.1!

inb4 someone screams "MEMO ALL THE COMPONENTS" and Dan shows up to tell them that's a bad idea

I just pushed that change up as https://github.com/reduxjs/react-redux/commit/5cddd880df80e57196cd3e0a64b78075f1d5b21e if anyone else wants to try it out.

[Jessidhia]

SHIP IT

More seriously, this would require a v7 release... and probably more testing 🤔

[markerikson]

Yeah, as I said at the start of the issue, any internal changes that require a bump to the React peer dependency would be a major version change for React-Redux, as that's a breaking change.

In theory, it'd still be nice to come up with at least one alternative implementation that fits the listed constraints, including "works on 16.4 and thus could be shipped as 6.1.0". In reality? I'm not entirely sure there's a feasible approach. Just needing to access the store via context in the constructor for a class version of connect would probably be an issue.

[markerikson]

Poked a couple more things. I realized that the top-level connected components were still subscribing directly to the store, so their updates weren't actually being collected into unstable_batchedUpdates(). I tried modifying <Provider> to use a Subscriber instance inside, so that those top-level components should batch updates together.

I'm not seeing a particularly noticeable difference with the previous build, but it's certainly no worse, and both builds are still meaningfully faster than v6 and v5.

+-----------------------------------------
¦ Version                     ¦ Avg FPS ¦ 
+-----------------------------+---------+-
¦ 5.1.1                       ¦ 33.77   ¦ 
+-----------------------------+---------+-
¦ 6.0.0                       ¦ 26.52   ¦ 
+-----------------------------+---------+-
¦ 6.1.0-hooks-batchedprovider ¦ 35.67   ¦ 
+-----------------------------+---------+-
¦ 6.1.0-hooks-memo            ¦ 35.09   ¦ 
+-----------------------------------------

Pushed that change up too.

[esamattis]

@markerikson Awesome work!

Regarding to your Twitter question I would really like to see major release asap so we can start experimenting with hook apis in real projects.

I would be very eager to try to port my hooks implementation to use the official Provider so I could put them into existing project using connect() to see how they work in real life code bases.

[ricokahler]

Yeah, as I said at the start of the issue, any internal changes that require a bump to the React peer dependency would be a major version change for React-Redux, as that's a breaking change.

In theory, it'd still be nice to come up with at least one alternative implementation that fits the listed constraints, including "works on 16.4 and thus could be shipped as 6.1.0". In reality? I'm not entirely sure there's a feasible approach. Just needing to access the store via context in the constructor for a class version of connect would probably be an issue.

@markerikson it is possible to check if the version of react is at least 16.8 and then use a hooks implementation? that way you can keep the react peer dependency version and users can gradually use the newer implementation when they upgrade to a newer version of react. ideally it would also tree shake the implementation that it's not using too

this is just a thought though. I haven't assessed if it's possible or makes sense

[markerikson]

Not really, no.

I'm not going to ship duplicate implementations of connect in the same release. Not good for maintainability or bundle size.

v5 still works with every version of React >= 0.14, albeit with warnings in <StrictMode>. v6 works with >= 16.4, it's just not as ideal an implementation as we'd hoped. If staying on a specific non-latest version of React is a concern, those are both valid options.

Really, if you're on any React 16.x release, you ought to be able to upgrade to 16.8 without any breakages. The only tiny change that might be an issue was a specific tweak in behavior to getDerivedStateFromProps that was introduced in 16.3 and then changed in 16.4, and that was considered a bugfix. Other than that, if you're on 16.x, I don't see any reason why you shouldn't be able to bump to 16.8.

So, as I said earlier: I'd certainly like to come up with an implementation that only requires React 16.4 and also fits all the other constraints (better perf, direct subscriptions, no <StrictMode> warnings, etc), but at this point I think it's unlikely.

FWIW, I put up a Twitter poll asking how people felt about us possibly bumping our major version to v7 if it meant potentially faster perf and the ability to ship a public hooks API, and 90% are in favor of that:

https://twitter.com/acemarke/status/1093759113241100288

[waynebrantley]

Version 6 seems mostly like a no "need to move to" if you can avoid using - and just stay on 5. If you want to upgrade to react 16.8, you can use v7 and that is super fast and awesome.

• React >= 0.14 you can use v5
• React >= 16.8 you can use v7

This seems more than acceptable. (If v7 is faster than v5 that would be an additional reason to bump react, etc)

[markerikson]

I have seen a number of issues in the React repo about weird / bad things happening when you mix legacy context and new context in the same React tree, and v5 still uses legacy context. Also, most of the React-Redux ecosystem has updated itself to work correctly with v6 (Redux-Form, React-Redux-Firebase, etc). So, there are plenty of valid reasons to use v6 right now.

[waynebrantley]

@markerikson Yes, there are valid reasons to use it...but if you can avoid it (dont upgrade Redux-Form, etc) - seems somewhat valuable to wait for these issues to be resolved. I am unaware about mixing - etc - and did not mean to imply all your v6 work was completely 'invalid', etc. Appreciate you and this project!

[ancestorak]

The new version absolutely killed the performance of my relatively simple app, so I had to downgrade.

The use case is storing form values in Redux state (via redux-form). Handling of a keypress event takes 150-200ms on v6.0.0, as opposed to 25-40ms on v5.1.1. I am under the impression that such a big regression is atypical and while I can't provide the source code, I'd love to give any information necessary to construct a test case.

I have a pretty deep component tree because I use HOCs liberally, perhaps that's a factor?

[markerikson]

@ancestorak : it would help if you can provide a link to a specific project or repo that demonstrates the issue, so that we can both see what's happening, and set up benchmarks that replicate that for later comparisons.

[ancestorak]

@markerikson Unfortunately the project is proprietary so I'll have to reduce it to a minimal test case. It would help to know what are the key factors to look out for. I'm not familiar with the internals of context update propagation, but I'm guessing tree size is important? Anything else?

[markerikson]

I dunno what the key factors are - that's why I need to see a project that demonstrates this behavior :)

[markerikson]

Day job's had me busy and mentally occupied the last couple weeks, but I've been able to make a bit of improvement to the benchmarks suite the last couple days. Want to give an update on where things stand.

I just merged in a benchmarks PR that bumps React to 16.8, captures initial mount and overall average render timings, and adds a new "deep tree" benchmark scenario.

In general, what I'm seeing is that the current experimental hooks-based implementation of connect appears to be very competitive with v5 in terms of update performance. It does seem to be a little bit slower than both v5 and v6 in initial mount time for the entire tree, but I'm not sure how much of an issue that is.

The actual specific numbers for FPS, mount time, and average update time fluctuate from run to run, but the behaviors are fairly consistent from run to run relative to each other.

Here's a sample run of the suite as an example. 6.1.0-hooks-batchedprovider is the last commit I pushed a few days ago, and 6.1.0-hooks-useeffect is a tweak I just made to switch from useLayoutEffect to useEffect internally just to see if there's a difference. (And yes, v6 truly does appear to be drastically slower in the "deeptree" benchmark - that result is consistent across runs.)

Results for benchmark deeptree:
+-------------------------------------------------------
¦ Version                     ¦ Avg FPS ¦ Render       ¦
¦                             ¦         ¦ (Mount, Avg) ¦
+-----------------------------+---------+--------------+
¦ 5.1.1                       ¦ 58.23   ¦ 123.6, 0.1   ¦
+-----------------------------+---------+--------------+
¦ 6.0.0                       ¦ 9.09    ¦ 119.9, 7.4   ¦
+-----------------------------+---------+--------------+
¦ 6.1.0-hooks-batchedprovider ¦ 58.04   ¦ 125.1, 0.2   ¦
+-----------------------------+---------+--------------+
¦ 6.1.0-hooks-useeffect       ¦ 58.50   ¦ 120.1, 0.1   ¦
+-------------------------------------------------------

Results for benchmark stockticker:
+-------------------------------------------------------
¦ Version                     ¦ Avg FPS ¦ Render       ¦
¦                             ¦         ¦ (Mount, Avg) ¦
+-----------------------------+---------+--------------+
¦ 5.1.1                       ¦ 33.14   ¦ 221.1, 0.6   ¦
+-----------------------------+---------+--------------+
¦ 6.0.0                       ¦ 12.28   ¦ 230.1, 8.6   ¦
+-----------------------------+---------+--------------+
¦ 6.1.0-hooks-batchedprovider ¦ 31.88   ¦ 277.2, 0.4   ¦
+-----------------------------+---------+--------------+
¦ 6.1.0-hooks-useeffect       ¦ 34.56   ¦ 292.8, 0.7   ¦
+-------------------------------------------------------

Results for benchmark tree-view:
+-------------------------------------------------------
¦ Version                     ¦ Avg FPS ¦ Render       ¦
¦                             ¦         ¦ (Mount, Avg) ¦
+-----------------------------+---------+--------------+
¦ 5.1.1                       ¦ 41.80   ¦ 602.6, 0.3   ¦
+-----------------------------+---------+--------------+
¦ 6.0.0                       ¦ 28.57   ¦ 581.6, 22.9  ¦
+-----------------------------+---------+--------------+
¦ 6.1.0-hooks-batchedprovider ¦ 41.86   ¦ 692.4, 0.3   ¦
+-----------------------------+---------+--------------+
¦ 6.1.0-hooks-useeffect       ¦ 41.56   ¦ 657.0, 0.3   ¦
+-------------------------------------------------------

Results for benchmark twitter-lite:
+-------------------------------------------------------
¦ Version                     ¦ Avg FPS ¦ Render       ¦
¦                             ¦         ¦ (Mount, Avg) ¦
+-----------------------------+---------+--------------+
¦ 5.1.1                       ¦ 45.50   ¦ 3.5, 0.5     ¦
+-----------------------------+---------+--------------+
¦ 6.0.0                       ¦ 28.28   ¦ 3.4, 4.9     ¦
+-----------------------------+---------+--------------+
¦ 6.1.0-hooks-batchedprovider ¦ 48.82   ¦ 3.6, 0.2     ¦
+-----------------------------+---------+--------------+
¦ 6.1.0-hooks-useeffect       ¦ 48.31   ¦ 4.1, 0.4     ¦
+-------------------------------------------------------

I may try to modify the benchmark harness to run each benchmark+version several times, then average those to smooth out the fluctuations in individual runs.

I'd really appreciate some help working on that and trying to come up with some additional benchmark scenarios :)

I'd also still love to see other people attempt to reimplement the guts of connect themselves, or critique my current experimental implementation. It's entirely likely there's a better approach out there, or that I've done something sub-optimal with my implementation. More eyes on the code and more implementations to compare against would be great.

[Ephem]

Awesome work Mark, benchmarks are looking great I'd say. :) I'm not that worried about the slight increase in mount times over 5.1.1 either.

I tried getting the branch connect-subscription-experiments to run to start experimenting with adding SSR-tests (more fun experimenting in an experimental branch 😉), but seems like src/utils/Subscription.js is missing?

[markerikson]

@Ephem : Yipes, I'm a doofus :) Completely forgot to commit Subscription.js.

Just committed and pushed that.

[markerikson]

And just took the time to clean up the branch. Removed dead code, fixed lint issues, formatted, and bumped test dep versions, and the branch now actually shows green on Travis.

[Ephem]

@markerikson Not a doofus at all, that happens all the time when experimenting and moving fast. :)

Thanks for the cleanup as well, looks great! I got my first server-test passing and will continue experimenting.

I did notice one minor discrepancy though, install-test-deps.js is pointing at React 16.8, but run-tests.js is pointing at 16.6, so might want to bump that as well. :) Again, great work! 👏

[alexreardon]

These numbers look great @markerikson. Are you planning on moving it to a release?

[markerikson]

@alexreardon : I'd still like to try to flesh out the benchmarking and test cases some more first. But, as I said, this is really where we need some community help to come up with appropriate test cases and benchmarks. For example, we don't currently have any tests that mimic an SSR or dynamically-loaded-reducers scenario, and that's not something I'm familiar with myself. I'd also really like to see some benchmarks that do things like "typing in a form".

To be blunt, despite my repeated requests for the community to help out with this effort overall, thus far it's pretty much been a one-Mark show.

@timdorr : we could potentially put up an alpha/preview build from this branch. Call it 7.0.0-alpha.0 or something, and bump the React peer dep to 16.8 .

[alexreardon]

I could try and give it a whirl if you do an alpha release or similar

[markerikson]

@alexreardon : you should be able to pull the branch from https://github.com/reduxjs/react-redux/tree/connect-subscription-experiments and build it yourself if you'd like to try it out right now.