Links

1. https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-2
2. https://react-redux.js.org/api/batch

The Problem

Unnecessary re-rendering in your React / Redux application can have multiple drawbacks – such as:

1. The output in the Browser console is more difficult to interpret.
2. The application is slower,
3. The user may see ugly half renders or full re-renders.

In order to prevent unnecessary re-renders, it is important to understand the cause:

useSelector

Redux use useSelector and useDispatch. it is the dispatch function (not useSelector) that triggers the re-render(). So you can have as many useSelectors as you want at the start of your component. In fact it is best practice to use multiple fine grained useSelectors to return only the properties that you need. Fetching a whole object from the store is bad practice and is not recommended and may cause components to re-render unnecessarily.. Multiple useSelectors are batched together and are processed in one execution – so don’t worry about using as many useSelectors as necessary.

useDispatch

However, if you have more than one dispatch() in a useEffect or in an eventHander, then each dispatch will cause a separate re-render. However, there are two fixes for this problem:

1. You can use the batch() function to batch together multiple dispatch actions. See Link#2 above.
2. In Redux the dispatch() function should not be seen as a setter. Rather your meant to use it to say that something happened and the reducers react to that event.
   The fix is to only send one dispatch call, and have multiple reducers in multiple slices listen for it.

If you find yourself using multiple dispatch actions called setValue1, setVaslue2 etc, then you have missed the point of dispatch actions. A dispatch action should represent an event such as “User Click On Save”. The dispatch action should then be picked up by multiple reducers in one or more slices. The end result might be multiple changes in state in the Redix store.