How 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:
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:
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.
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:
The result we will get is the following:
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 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!
Sami Derian
Project manager and expert in software development. Sami is responsible for strategic project planning and client relationships. Having worked in different web agencies he developed a passion for e-commerce and marketing.
Leave a comment