Understanding “React.memo()”

Photo by Fredy Jacob on Unsplash

Many new features are released in React v16.6.0. React.memo is one of the cool features in it. memo means memorizing. This is a performance optimization feature for the function components. React.memo() is similar to PureComponent that it will help us control when our components re-render.

Components will only re-render if its props have changed! Normally all of our React components in our tree will go through a render when changes are made. With PureComponent and React.memo(), we can have only some components render.

memo has made it easier to avoid the continuous rendering process that we could do with the shouldComponentUpdate() method.

I’ll try to explain it with a simple example.

Let’s consider it in a simple way. We’ll have a parent component called Parent the main logic in it and a child component called Child simply console logging and renders some text.

Child.js

const Child = () => {
  console.log(‘Log from Child component.’);
  return <div>This is Child component.</div>;
};

Parent.js

const Parent = () => {
  const [text, setText] = useState(‘’);
  return (
    <div>
      <span>Text: {text}</span>
      <input
        placeholder=”Type a text”
        onChange={event => setText(event.target.value)}
      />
      <Child />
    </div>
  );
}

In Parent.js, the console will log “Log from Child component.” every time you type in the input. It’s because every time we set the state with the onChange() function, the whole Parent component re-renders and therefore updates the Child component. Since the Child component is static, we do not have to render it every time we set the text state.

To prevent this, we needed to use the shouldComponentUpdate() method. Now we can overcome this problem with memo.

Here are 2 ways:

• If you would like to memoize the Child component from components to components, just import it and use React.memo() inside that component:

import Child from ‘…’;
// Memoize the Child component
const MemoizedChild = React.memo(Child);
const Parent = () => {
  const [text, setText] = useState(‘’);
  return (
    <div>
      <span>Text: {text}</span>
      <input
        placeholder=”Type a text”
        onChange={event => setText(event.target.value)}
      />
      {/* Use the memoized component like before */}
      <MemoizedChild />
    </div>
  );
}
export default Parent;

• If you would like to globally memoize the Child component, go with the following:

import React from ‘react’;
const Child = () => {
  console.log(‘Log from Child component.’);
  return <div>This is Child component.</div>;
};
// Export the Child component memoized in default/globally
export default React.memo(Child);

With these methods, we are now preventing unnecessary re-rendering problems.

Thank you for following this guide and reading through to the end, see you on another one…

Originally published at Onur Şuyalçınkaya Blog.