React Memoization— How to use React.memo()
In the beginning, to understand how to use React.Memo() in React applications, we should take a look at what is memoization.
Memoization
Where does memoization base on? The answer to this question is Dynamic Programming. Dynamic Programming simply means optimization of your code over plain recursion. The idea is to store the results of the sub-problem and reuse them later when needed to do the same calculations. Dynamic Programming makes its program more efficient by using memoization. Let’s take a simple example for better understanding of memoization. Let’s say we have an additional function:
Basically addition function makes an addition operation as you can see above. The addition function takes two arguments. In this example 5 and 10 are passed addition function as an argument. After implementation of the logic operation of the function, it returns 15.
If we call this function using one of the memoization techniques, the value 15 corresponding to the values 5 and 10 is saved. Thus, if we call this function again with the same parameters since we already have the result corresponding to the parameters’s values, it returns the result directly to us and does not perform the addition operation again.
React Unnecessary Re-render Component
For understanding unnecessary re-render components let’s make a simple react application. Source structure of this application:
/src
/components
MyBestFriends.jsx
Counter.jsx
App.jsIn the application there are two components are used. MyBestFriends component is used to list best friends and add new best friends. Another component which is Counter is used to print a counter and increase the counter by using a button. Both of these components are called in App.js.
App.js Source Code:
In App.js consist of two states which are count and myBestFriendList. These states had been created for the pass to other components with their default values. Count state is responsible for Counter component in order to use for print counter and increase counter, myBestFriendList state is responsible MyBestFriendList component for print list of the best friends and adds new best friend.
MyBestFriend.jsx Source Code:
MyBestFriend component takes myBestFriendList state and its update function which is setMyBestFriendList. The goal of the myBestFriendList state is that print list of best friends. The goal of the setMyBestFriendList function is that add new best friend to list and update the state. Also MyBestFriend component has its own state which is newBestFriend to get new best friend name and use it for adding myBestFriendList state.
Counter.jsx Source Code
Counter component takes count state and its update function which is setCount. The goal of the count state is that print count value. The goal of the setCount function is that increases the count value and update the state.
After the explanation of source codes, let’s see how application works.
First of all, application works fine without any issue. It provides its requirements which are rendered count and increase the count value plus render the best friends and add new best friend. Let’s look at Console what happens in their first render.
After that let’s check what is going on when we update count state by increasing button. As I mentioned above, count state is created in App.js and passed to Counter component. We expect that when count state is updated, App will re-render. Everything is fine up until this point. Let’s check what is happening.
Even if we do not make any changes to the MyBesFriends component, we can see that the MyBesFriends component is also rendered again because our App component is re-rendered by count state.
Also, there are the same situation for MyBestFriend component. When we update myBestFriendList state, even if we do not make any changes to the Counter component, we can see that the Counter component is also rendered again.
When we update the count state, there is no reason to have rerender for MyBestFriend component. It supposes to be just App.js and Counter component re-render. There is also the same situation in point of MyBestFriend component.
Although such situations do not seem like a problem in small applications, these seemingly minor problems can seriously affect the performance of your application as your application grows. Here is the point that everything begins. So we can be able to avoid this effect of performance loss by using React.memo().
React.memo()
If the functional component takes the same props and renders the same result, we can use the React.memo() to skip redundant re-renders. Let’s explain how React.memo() accomplished it.
React.memo() use the shallow comparison to compare the previous prop and the current prop. If the previous prop and the current prop are equal in the case of primitive types like string, numbers, and in the case of object it just checks the reference of the previous prop and the current prop. If the props are equal then the shallow comparison returns true otherwise false. After that, if the result of the shallow comparison is true, React.memo() skips the re-render due to the memoization of React.memo().
How To Use React.memo() In Our Project
Firstly, React.memo() is a higher-order component. We can wrap the functional component that renders the same result with the given same props. When we update the count state, to avoid re-render of MyBestFriends component we will wrap MyBestFriends component with React.memo(). In this way, even there is not any change on myBestFriendList state in App.js, we will prevent MyBestFriends component from re-render.
So, React.memo() If the props values sent to the MyBestFriends component were the same as the previous props values when the component was rendered, rendering the component allowed us to skip. Thus, it prevented the MyBestFriends component from rendering again until the props values were sent to the component change. Let’s see the result by updating the count state again.
As you can see from the above only Counter components re-render due to React.memo() memoization technique. The MyBestFriends component is not re-rendered because the previous props reference values of the MyBestFriends component are the same as the current props reference values. Let’s dive into implementing React.memo() for Counter component to avoid re-render Counter component because of myBestFriendList state update.
After that see the result when we update myBestFriendList state. We expect that only have re-render MyBestFriends component.
And we got the same result which only has re-render for MyBestFriends component.
When We Use React.memo()
1- If we have a functional component that takes the same props and renders the same output.
2- The component is redundant re-rendered, this affects the performance of your application as your application grows.
When We Don’t Use React.memo()
1- If the component is class-based then use the shouldComponentUpdate().
2- If we have a functional component that takes different props and renders different outputs.
3- If we wrap all functional components then it causes a performance issue.
Let’s think about it, we have 100 components and all of them take different props. Remember that, React.memo() uses shallow comparison to compare the results of the props. If the current props and previous props are equal ( for primitive type, for objects check the references) then the shallow comparison returns true otherwise returns false. But in this scenario, the rendered output is always different due to different props so we know the shallow comparison returns are always false. The shallow comparison runs 100 times for nothing. In the conclusion, using unnecessary React.memo() harms the app.
Authors
Gökhan Samet Albayrak: Linkedln — Github—Medium
Mustafa Batuhan Bayoğlu: Linkedln — Github
Github Link For Example Project Which Used In This Article
Lastly, I wrote this article with Gökhan and super thankful to him. We hope that this article make you have an idea about React.memo() and add value to you. We are fully open the feedback if there is any point you want to share with us.
