Getting started with React.memo
React.memo, like React.lazy, was also introduced in React 16.6.
If you ever worked with functional components, you probably know that functional components rerender every time the components tree changes.
This is exactly what React.memo is here to solve.
This is an example of a functional component without using React.memo.
In the above code, I have a simple class component named App.
In it I have a button which increases the count property on the state, an h1 tag to display the count and a SubComp component.
Now let’s take a second to look the SubComp component.
This is a functional component which receives a single property “title”. This property never changes. Yet, as the next screenshot will show you, it rerenders on every App state change.
What we can do? 😕
One thing we can do, we can replace the functional component with a class and extend PureCompoent. Sure, it will work but it also more work for us.
Another (better) thing we can do, is wrap our functional component with React.memo. A high order component built just for that.
React.memo works just like PureComponent. It Shallow compares your props and if all are equal, it will prevent the functional component from rerendering and just use the memoized component. This can give your app a real performance boost.
Here is the same example using React.memo
The App component stays the same without any change. As you can see, using React.memo is as simple as it gets.
Now let’s see how this affects our mini app.
If you look on the console panel, you’ll see it only logs once!
One step further
As I mentioned before, React.memo works just like PureComponent. But, what if we need more? What if need more than just shallow comparison?
You’re in luck. React.memo can get a function as a second parameter.
For example:
const areEqual = (prevProps, nextProps) => {
return (prevProps.title === nextProps.title)
};React.memo(SubComp, areEqual);
This is just like using ‘shouldComponentUpdate’ for a class component with one major difference. The ‘areEqual’ function return false in order to go on with the render while ‘shouldComponentUpdate’ need to return true.
This means ‘areEqual’ is just the opposite to ‘ shouldComponentUpdate’.
One other thing, you can name the ‘areEqual’ function as you like.
Bonus
Like with React.memo, we can create our own memoization function. We can memoize heavy functions, recursive functions or large iteration functions. This, like React.memo can boost our app performance.
In the above example, we create a memo function (it is an example so in reality, it can be cleared from all the console.log and unneeded if), then we take our very heavy function called ‘add’ and wrap it with our ‘memo’ high order function resulting ‘memoAdd’ function. Now we can use ‘memoAdd’ instead of add boosting our performance. 😏
That’s it. As usual, I hope you liked this post and found it useful.
