Tech Blog

  • 13 December 2019
  • Blog
Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
 

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 :

  • Using React’s PureComponent, React shallow compares previous props and current props and avoid re rendering if there is no change.
  • Using shouldComponentUpdate lifecycle we can selectively avoid re rendering of a React Component.
  • 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.

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.

 

In console tab of above example, by default, you will see two logs :

Logs

In above screen, By default both Header and Counter components get load so we got two console output. After this, If you click changeUser button, it will render only Header component which is optimization for us here.

To achieve this, we need to understand selectors from ‘reselect’ library.

What are selectors ?

In our context, selectors are nothing but functions which can compute or retrive data from the store. We usually fetch the state data using mapStateToProps function like this.

//selectCounterValue
import { createSelector } from "reselect";
const selectCounter = state => state.counter;
export const selectCounterValue = createSelector(
[selectCounter],
counter => counter.counter
);

‘selectCounterValue’ help us to retrieve only counter state from our whole state object which we can leverage in our component’s as stated above.

//In Component
const mapStateToProps = createStructuredSelector({
counter: selectCounterValue
});

Here createStructuredSelector will create a structure for us in which we need not to pass our state as argument & it is also provided by ‘reselect’ library.

Top tips to make your life better

To sum up, I will designate some tips I derived for myself while using Reselect library.

  1. Always use createSelector() from Reselect to create a selector, if it transforms value from the state in any way.
  2. Avoid curried selectors. As a rule, you don’t need them. You can pass all the arguments you need using the second argument of a selector. In fact, the only case I can think of when you need a curried selector is described in the documentation.
  3. Be careful with dispatching actions to the store from lifecycle functions. In general, avoid doing this. But if you have to, maybe it is a good idea to compare props manually before dispatching an action.

     

     

     

    WRITTEN BY Vinod CHAUHAN

     

     

Rating:
( 0 Rating )

Add comment

Our professionals are experienced and ready to take your projects. Contact us, lets hear from you. We appreciate your interest.

Email : choratech@gmail.com

Lets Develop your App

Online count

We have 86 guests and no members online

Opening hours

  • Monday to Friday 9:00am to 5:00pm
  • Saturday 9:00am to 4:00pm
  • Sunday: CLOSED
© 2019 Chora Technologies. All Rights Reserved.