Understanding “React.memo”

January 20, 2020

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 rerender.

Components will only rerender 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. A compiled package to prevent unwanted re-rendered operations.

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

Let's consider it in a simple way. We 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 Childcomponent. 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'd like to memoize the Child component from components to components, just import it and use React.memo() inside that component:

Method1.js

import Child from '...'
const MemoizedChild = React.memo(Child) // Memoize the Child component

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'd like to globally memoize the Child component, go with the following:

Method2.js

import React from 'react'

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

export default React.memo(Child) // Export the Child component memoized default/globally

With these methods, we're now preventing unnecessary re-rendering problem. See you on next one!