React has been working with performance in a very good way, however, we as software engineer should be aware at some points, and not just do whatever we want and how we want and expect to have good results, because there will be consequences, and unfortunately, I’ve seen very good programmers that does’t know that, and that is the why I am writing this post.
In this post, we will go through four parts:
- Why React.memo?
- What is React.memo?
- How to use it?
- Where to use it?
Why use React.memo?
React by itself avoid very well unnecessary re-render working with reconciliation, which is the DOM comparison process that React does whenever there is a change in the application state, in the properties passed via parameters or in the parent component.
When this happens, React generate an HTML from that component, which is basically a print from that element, and compare with the previous HTML, validate if there is some change, and if there is, replace with the new changes. The process is very fast, although, if you have a big list with 10.000 items, and for each letter typed in your input field your entire list will re-render again all of the 10.000 items, this could cause a huge performance problem.
The question we should take from this is, why do I need a re-render in my component if the changes in state was in my parent component and my child component does't depends on this update?
What is React.memo?
React.memo uses a technique called memoization, where it basically does a superficial comparison of the received value with the existing value, and just execute the re-render in case of this value has some change, if not, it returns the cached value. Very simple, right? Summarizing, with React.memo we have a cached component and we will have a re-render of this component just if our state changes or if we receive a different value in our props, this is basically in a simple way what memoization means and what React.memo does. With all this in mind, I wonder…
Where should we use this?
Let's analyze the code:
TodoList.js
TodoListItem.js
Apparently, everything ok, right? But what happens when we type just one letter in the input field? React runs the map function, render the list and each component inside it, all over again. This is gonna happen for each letter typed in the input field, for each letter typed the local state is gonna change and React is gonna re-render everything all over again. But this is not totally wrong, our state was changed, so it makes sense to re-render. However, the component TodoListItem shouldn’t re-render because of it, this component have nothing to do with the input field, so it doesn’t make any sense re-render all over again, right ?
How to do it?
React.memo is a Higher Order Component(HOC), and it receives a component as parameter, so we can do something like:
See, just importing React.memo, and changing one line of code, calling the function React.memo and passing our component as parameter, we solve the problem. Now React.memo is gonna analyze each dependence that our component receive, and make a superficial comparison of the values, and just re-render if some value has changed, and with that our component is not gonna suffer re-render again consuming memory and performance every time without need. Very nice, right?
Bonus
Using React.memo, our component is just re-render if in the superficial comparison one of the values received has changed. With this type of comparison, React.memo ensure re-render the component analyzing the values received until one level. What does that means? Let's see some exemples:
Looking the above exemple, with these values been passed as parameters, React.memo would be able to compare them and see if the values has changed and then re-render. This would be a superficial comparison. So, if our component previously received the value “hi” and now it receives the value “bye”, React.memo is gonna re-render our component.
Now with these values, React.memo does't ensure the comparison, because we have more than one level, and today React.memo does't do this type of comparison, who knows in the future, right? So in this case, we can think about built an object with just one level and prepare our component to receive these values, or maybe build another component to handle those cases, but here is up to you. So tell me, what would do you do in this case? Go!
Clone this repo, open the browser console, install React Developer Tools plugin, and compare how many times happens the re-render with React.memo and without React.memo, and tell me if does't worth it to use React.memo. Github Code.
LinkedIn: http://linkedin.com/in/joseygor
Github: https://github.com/joseygordev
