How to React. Memo Can Improve Performance

We all know about the importance of app performance and that it significantly drives user
experience. Among many different methods that React offers, we can utilize the so-called
"Memoization".

What is Memoization?

Memoization is the ability to memorize or cache a component/function allowing us to not re-render it and instead to use the value we have stored in memory for it, if its properties are unchanged. This ensures a better performance as we save the whole rendering process and avoid expensive computations.

Why does Memoization work well with React?

Usually we are passing props that may or may not change to a React component. If a component to which we give props is wrapped in its parent component and its parent component has to be rendered again, it will force its child component to render even if its props have not changed. A sample of this problem is shown in the following code:

Image: React Code I
Image: React Code II
Image: My Todos I

Every time you press the counter, even if you are not changing the props, you are passing to the
Todos component, it will be re-rendering, and its timestamp will change as shown in the following image:

Image: My Todos II

If the Todos component was more complex, it would lead to performance issues. This is when using Memoization with React does miracles! We improve app performance and React.Memo comes to our rescue.

What is React.Memo?

React.Memo is a HOC (higher-order-component) that allows us to store a component in memory in order to use Memoization. This means that React will wrap our component in React.Memo, render it and save it as long as its props remain the same.

How to implement React.Memo?

Before solving the problem above let's understand how React.Memo() should be implemented.

Image: React.Memo

This is the structure of our React.Memo function to which we will pass as first parameter the
component to memorize. As second parameter we will have a callback in case we want to specify which parameters we want to compare to avoid re-rendering. With this implementation in mind, how could we then solve the problem we had in the previous example?

We just need to wrap our component to be memoized in memo as follows:

Image: Memoization

The result we will get is the following:

Image: My Todos III
Image: My Todos IV

As you can see, even if the parent component is being rendered again, our child component (our timestamp) does not change unless its props are changed, which is not happening. Now that we know how to use React.Memo, it's crucial to understand when not to use it. This response should be lengthy and deserves a separate blog, but in short:

If we cannot quantify how useful React.Memo is going to be for our component, we shouldn't use it as we may end up hurting our application.

Conclusion

As we have seen in the article, React.memo is handy to improve the performance of applications, and more when we have quite complex and significant components. The perfect situations to use include the following:

1. When our component always has the same visual output.
2. When the properties of our component rarely change.
3. If the component must render many elements like a table, or a list.

I hope you enjoyed this short blog! Please let me know if you have comments or questions. If you need help with React development do not hesitate to contact me via conne.gil@prismasoftwares.com!

 

 

Conne Gil Morales

Conne Gil Morales

Sofware engineer with experience in front-end development and design. Conne has worked as independent freelancer with medtech startups in Germany and Italy. She manages our team of Colombian web and software developers.

Sami Derian

Sami Derian

Lorem ipsum dolor sit amet consectetur adipiscing elit dolor

Leave a comment

Your email address will not be published.