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 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
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!