v2.9.0
Now Redux DevTools Extension is way more performant out of the box. Before highly updated apps would flood the extension causing it to take all the CPU.
Here's an autotodo example with lots of data and even containing circular references in the state. As you notice 100% of CPU is taken for rerendering React components while the extension takes only about 20%:
Also you can check autoincremening example for a lighter demo.
While the extension is running in a separate process, 20% for a highly updated app shouldn't be a problem. If you want it to have no impact at all, set the latency
parameter to 1000 ms or more, as you usually don't get to investigate more than one action per second. If the state is huge, you can either set maxAge
parameter to 30
or less or strip that payload by using actionSanitizer
/ stateSanitizer
parameters.
Example of usage:
const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
latency: 1000,
maxAge: 30,
stateSanitizer: (state) => state.data ? { ...state, data: '<<LONG_BLOB>>' } : state
}));
If you still want all the changes to be available immediately, set latency
parameter to 0
. Also the extension strips circular reference to gain the performance. If you want them to be serialized, set serializeAction
/ serializeState
to false
. If you want it in the fast mode keep them as undefined
(which is by default).