React Memoization

Memoization is a new concept in ReactJS through which we can store a heavy functional component in memory. Then reuse that component again calling it from cache.

Émile Perron @emilep

The default behavior of a component declared using React.memo is that it renders only if the props have changed. It does a shallow comparison of the props to check that but there is an option to override that as well.

Basic Memo.

This helps boost the performance by avoiding re-rendering if not needed.

• React.memo is a higher order component, you can wrap existing functional components using it as well.

Memoized Component, Wrapped By Existing Component.

Now we can see, If we are using updated value in the memo Component so Both component will be render.

Create memoComponent.js file.

memoComponent.js

Create renderComponent.js file.

renderComponent.js

When we are using Updated value in Add Component Both will be render.

Result :

Now If we are not using updated value in the Add Component, than you can see the Result.

renderComponent.js

Result :

Now we can see only Outer Component is rendering.

You can check this link for more details.