Getting started with React.memo

Gilad lev-ari
Dec 2, 2018 · 3 min read

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.

Using functional component. No 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

Using functional component. With 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.

Gilad lev-ari

Written by

Full stack web engeneer with over a decate of experience and true passion for front end development and JavaScript 💪

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade