React internally already optimizes the performance quite a bit without having to explicitly optimize for performance. React.memo can help you to optimize the number of renders of your React components even further.

In this article I will explain to you how you can optimize React performance by using React.memo, some common pitfalls you could encounter and why you shouldn’t always use React.memo.

What is React.memo?

React.memo is a function that you can use to optimize the render performance of pure function components and hooks. It has been introduced in React v16.6…

Memo derives from memoization. It means that the result of the function wrapped in React.memo is saved in memory and returns the cached result if it’s being called with the same input again.

Since it’s used for pure functions: If the arguments don’t change, the result doesn’t change either. React.memo prevents functions from being executed in those cases.

I’ve written a small example to visualize this a little bit better. Go ahead and write something into the input field. You can also play around with the code on codepen.

#performance #react #programming #react.memo()