What is Reselect & How it Improves Performance With Redux?
If you haven’t read about redux you should at least read about it. I assume that you have done your research and know what redux is.
To learn what redux is and set up redux feel free to read this article:
For a brief summary, redux is a global state container that is used to manage global data flow within the whole application.
Instead of having different components within the same application to pass data to each other, these components can all access and communicate the same piece of data through this global state container.
One common problem with redux is with a connected component, mapStateToProps gets called every time when global state changes. That’s fine if I only have a few variables in the redux. What if my connect component is connected to a several bunch?
Enters reselect.
To understand reselector, we need to first understand what selectors are?
A selector is a function that returns a subset of data from a larger collection.
In our case, this subset of data is whatever variable we are pulling from the reducer. The collection would be the reducer itself.
Let’s say we have the following component:
and the following selector class(if you have been following https://medium.com/@kaleongtong282/how-to-set-up-redux-thunk-on-a-react-project-79b0c29c96db, then create a selector folder under the src folder and create a selector class:
Above in the FruitComponent, if there are any changes to its local state or props(whether it is through redux or parent passing different values down), fruitTwo gets recalculated every time.
Here’s where reselect can be a bit brilliant.
With reselect, fruitOne only gets computed when the actual value changes. FruitTwo, on the other hand, gets computed again only simply because the reducer experienced change.
On the other hand, if fruitTwo’s value changed, fruitTwo will get recalculated but fruitOne remains the sample.
Reselect memoizes the value of fruitOne and will only return a new piece of data if it senses the value is changed in the redux.
Here is a screenshot to demonstrate how that will look like in a react application:
Even though fruitTwo’s value did not get changed, it still gets recalculated because of a state change to fruitOne.
That’s it! You just learned how to create selectors to optimize your application’s performance.
