From b4053be294ce7eb0be18f542e67e32281c6024b6 Mon Sep 17 00:00:00 2001 From: Augustus Yuan Date: Fri, 24 May 2019 14:43:24 -0700 Subject: [PATCH 1/2] Add docs about batch API to Performance FAQ --- docs/faq/Performance.md | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/docs/faq/Performance.md b/docs/faq/Performance.md index 80551cd985..edd73f863a 100644 --- a/docs/faq/Performance.md +++ b/docs/faq/Performance.md @@ -110,7 +110,31 @@ However, you _do_ need to create a copied and updated object for each level of n Redux notifies subscribers after each successfully dispatched action (i.e. an action reached the store and was handled by reducers). In some cases, it may be useful to cut down on the number of times subscribers are called, particularly if an action creator dispatches multiple distinct actions in a row. -If you use React, note that you can improve performance of multiple synchronous dispatches by wrapping them in `ReactDOM.unstable_batchedUpdates()`, but this API is experimental and may be removed in any React release so don't rely on it too heavily. Take a look at [redux-batched-actions](https://github.com/tshelburne/redux-batched-actions) (a higher-order reducer that lets you dispatch several actions as if it was one and “unpack” them in the reducer), [redux-batched-subscribe](https://github.com/tappleby/redux-batched-subscribe) (a store enhancer that lets you debounce subscriber calls for multiple dispatches), or [redux-batch](https://github.com/manaflair/redux-batch) (a store enhancer that handles dispatching an array of actions with a single subscriber notification). +Starting in [v7](https://github.com/reduxjs/react-redux/releases/tag/v7.0.1) a new `batch` public API is available from `redux` for you to use if you use React. + +React's `unstable_batchedUpdate()` API allows any React updates in an event loop tick to be batched together into a single render pass. React already uses this internally for its own event handler callbacks. This API is actually part of the renderer packages like ReactDOM and React Native, not the React core itself. + +Since React-Redux needs to work in both ReactDOM and React Native environments, we've taken care of importing this API from the correct renderer at build time for our own use. We also now re-export this function publicly ourselves, renamed to `batch()`. You can use it to ensure that multiple actions dispatched outside of React only result in a single render update, like this: + +``` +import { batch } from "react-redux"; + +function myThunk() { + return (dispatch, getState) => { + // should only result in one combined re-render, not two + batch(() => { + dispatch(increment()); + dispatch(increment()); + }) + } +} +``` + +If you are using an alternative React renderer, like the [Ink CLI renderer](https://github.com/vadimdemedes/ink), that method isn't available for us to import. In that case, you will need to change your code to import from the new `react-redux/es/alternate-renderers` entry point instead. (Use `react-redux/lib/alternate-renderers` for the CJS version). That entry point exports a no-op version of `batch()` that just executes the callback immediately, and does not provide React batching. + +In that situation, you may want to consider aliasing react-redux to one of those alternate entry points in your build tool for the best compatibility, especially if you're using any other libraries that depend on React-Redux. + +If you have not upgraded to v7, you can also take a look at [redux-batched-actions](https://github.com/tshelburne/redux-batched-actions) (a higher-order reducer that lets you dispatch several actions as if it was one and “unpack” them in the reducer), [redux-batched-subscribe](https://github.com/tappleby/redux-batched-subscribe) (a store enhancer that lets you debounce subscriber calls for multiple dispatches), or [redux-batch](https://github.com/manaflair/redux-batch) (a store enhancer that handles dispatching an array of actions with a single subscriber notification). #### Further information @@ -121,6 +145,7 @@ If you use React, note that you can improve performance of multiple synchronous - [#911: Batching actions](https://github.com/reduxjs/redux/issues/911) - [#1813: Use a loop to support dispatching arrays](https://github.com/reduxjs/redux/pull/1813) - [React Redux #263: Huge performance issue when dispatching hundreds of actions](https://github.com/reduxjs/react-redux/issues/263) +- [React-Redux #1177: Roadmap: v6, Context, Subscriptions, and Hooks](https://github.com/reduxjs/react-redux/issues/1177) **Libraries** From ed20766440a8cee891434ea951e5bc6b5d9efe7c Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Fri, 24 May 2019 15:55:19 -0700 Subject: [PATCH 2/2] Update Performance.md --- docs/faq/Performance.md | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/docs/faq/Performance.md b/docs/faq/Performance.md index edd73f863a..2ac09ee93f 100644 --- a/docs/faq/Performance.md +++ b/docs/faq/Performance.md @@ -110,9 +110,9 @@ However, you _do_ need to create a copied and updated object for each level of n Redux notifies subscribers after each successfully dispatched action (i.e. an action reached the store and was handled by reducers). In some cases, it may be useful to cut down on the number of times subscribers are called, particularly if an action creator dispatches multiple distinct actions in a row. -Starting in [v7](https://github.com/reduxjs/react-redux/releases/tag/v7.0.1) a new `batch` public API is available from `redux` for you to use if you use React. +There are several addons that add batching capabilities in various ways, like: [redux-batched-actions](https://github.com/tshelburne/redux-batched-actions) (a higher-order reducer that lets you dispatch several actions as if it was one and “unpack” them in the reducer), [redux-batched-subscribe](https://github.com/tappleby/redux-batched-subscribe) (a store enhancer that lets you debounce subscriber calls for multiple dispatches), or [redux-batch](https://github.com/manaflair/redux-batch) (a store enhancer that handles dispatching an array of actions with a single subscriber notification). -React's `unstable_batchedUpdate()` API allows any React updates in an event loop tick to be batched together into a single render pass. React already uses this internally for its own event handler callbacks. This API is actually part of the renderer packages like ReactDOM and React Native, not the React core itself. +For React-Redux specifically, starting in [React-Redux v7](https://github.com/reduxjs/react-redux/releases/tag/v7.0.1) a new `batch` public API is available to help minimize the number of React re-renders when dispatching actions outside of React event handlers. It wraps React's `unstable_batchedUpdate()` API, allows any React updates in an event loop tick to be batched together into a single render pass. React already uses this internally for its own event handler callbacks. This API is actually part of the renderer packages like ReactDOM and React Native, not the React core itself. Since React-Redux needs to work in both ReactDOM and React Native environments, we've taken care of importing this API from the correct renderer at build time for our own use. We also now re-export this function publicly ourselves, renamed to `batch()`. You can use it to ensure that multiple actions dispatched outside of React only result in a single render update, like this: @@ -130,12 +130,6 @@ function myThunk() { } ``` -If you are using an alternative React renderer, like the [Ink CLI renderer](https://github.com/vadimdemedes/ink), that method isn't available for us to import. In that case, you will need to change your code to import from the new `react-redux/es/alternate-renderers` entry point instead. (Use `react-redux/lib/alternate-renderers` for the CJS version). That entry point exports a no-op version of `batch()` that just executes the callback immediately, and does not provide React batching. - -In that situation, you may want to consider aliasing react-redux to one of those alternate entry points in your build tool for the best compatibility, especially if you're using any other libraries that depend on React-Redux. - -If you have not upgraded to v7, you can also take a look at [redux-batched-actions](https://github.com/tshelburne/redux-batched-actions) (a higher-order reducer that lets you dispatch several actions as if it was one and “unpack” them in the reducer), [redux-batched-subscribe](https://github.com/tappleby/redux-batched-subscribe) (a store enhancer that lets you debounce subscriber calls for multiple dispatches), or [redux-batch](https://github.com/manaflair/redux-batch) (a store enhancer that handles dispatching an array of actions with a single subscriber notification). - #### Further information **Discussions**