Understanding “React.memo”
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
Parent.js
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'd like to memoize the
Child
component from components to components, just import it and use React.memo()
inside that component:Method1.js
If you'd like to globally memoize the Child component, go with the following:
Method2.js
With these methods, we're now preventing unnecessary re-rendering problem. See you on next one!