Optimize Redux before it kills your Application

First of all, let’s take a look at how a React-Redux application works. What Redux does internally, It provide us with a store for our app’s state and with ways to communicate with the store. One of these ways is the connect() function. After calling connect() on a custom component you get a wrapper that passes state from a store as props to your component. This happens by means of mapStateToProps() function which is called on every state change.

After mapStateToProps() yields recalculated props, the new props are shallow compared to the old ones and if they differ, component gets rerendered. Again, reference equality (===) is used to compare the props.

React and Redux compliment each other well. React Components subscribe to Redux store due to which the child components re renders when the state (Redux state) is changed every time. So any component which is subscribed to Redux re renders when there is a state change (unless and until we mention not to do so).

This is a prime reason for which there is a need for optimizing React Redux applications in order to avoid unnecessary re renders.

To avoid all such conflicts, there are certain ways which are described below :

1) Using React’s PureComponent, React shallow compares previous props and current props and avoid re rendering if there is no change.
2) Using shouldComponentUpdate lifecycle we can selectively avoid re rendering of a React Component.
3) Using functional components when there is no use of internal state.

This can help in avoiding re rendering unless and until there is a prop change which is consumed by the component.

To handle this problem we have reselect library which works flawlessly in this case:

Reselect Concept

According to the library’s homepage
Selectors can compute derived data, allowing Redux to store the minimal possible state. Which can be considered as keep the store as minimal as possible. Compute any derived data through the selectors.
Selectors are efficient. A selector is not recomputed unless one of its arguments change.

For code Example and full article please check on [https://medium.com/javascript-in-plain-english/optimize-redux-before-it-kills-your-application-6b73cf5f520b]