Boost your React Apps performance with “React.memo”

Performance is one of the most important aspects of any web project or application. Nobody will continue to use a slow website/application. Optimizing application performance is key for developers who are mindful of keeping a user’s experience positive to keep them on an app and engaged.

This is my first medium, and I will talk about React.memo and Dynamic Import in React Application.

React.memo ?

According to the name, I guess we all know the meaning of this feature. “Memo” words were derived from memoization, and if we refer to Wikipedia, can be said that :

In computing, memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.

React.memo is a higher order component.

If you want to prevent your component from doing unnecessary re-render, React.memo is very helpful for boosting the performance of our app

React.memo only checks for props changes. as long as your component props don’t change, React will skip rendering the component, and reuse the last rendered result.

I will give you an example of how to use React.memo and how it would be useful in our project.

Here we go.

So, the first time we need 2 components for comparison. I created these 2 components in the “components” folder.

This is Component1 (use React.memo):

This is Component2:

and for the last, we just change the App.js to be :

And finally, we have an app like this :

Based on the image above, we can see the imported components on that page. if we just look at the video above, it just looks pretty good. there are no differences between component1 and component2.

But what happened in the background is that component2 always rerenders when the counter state changes. See the video below

Based on the console, component1 is only rendered once when the app is mounted. but component2 always rerenders while the state changes.

In the simple example above, we already know that using React.memo is useful to increase performance in our apps. Imagine that you must rerender many components when the state in the parent component changes, it will make our apps slower.

If your component renders the same result given the same props, you can wrap it in a call React.memo for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result.

React.memo only checks for prop changes. If your function component is wrapped in React.memo has a useState, useReducer or useContext Hook in its implementation, it will still rerender when state or context changes.

This method only exists as a performance optimization. Do not rely on it to “prevent” a render, as this can lead to bugs.