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).