Quick Redux Optimization Tips

#react #redux #javascript #reactnative

There are some places you might need to dispatch many actions

Example:

const doSomeAction = () => {
  dispatch(updateStatus(True));
  dispatch(setAction());
  dispatch(DoSomethingelse());
};

The downside to doing this is your redux store is going to be updated multiple times and causing (some) components to re-render multiple times.

A more optimized way is to use the "batch" API from redux.

Optimized Example:

import { batch } from 'react-redux';

const doSomeAction = () => {
 batch(() => {
   dispatch(updateStatus(True));
   dispatch(setAction());
   dispatch(DoSomethingelse());
 });
};

Wrapping our dispatches in batch API ensures that they are dispatched outside of React and the store is updated only once, resulting in a single rerender.

Just think of "batch" like Promise.all for promises

For more read:

image credit: itnext