DEV Community

vinodchauhan7
vinodchauhan7

Posted on

18 6

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]

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more