What is React Memo and How to use it

React Memo Introduced in version 16.6

A memo is the sort form of Memoization.

A higher-order component that compares the previous props, if it is different than current props then render function will call otherwise it will not call. Benefits: It will save a lot of rendering so the performance of the Application will improve.

Where we have to use it?

Example 1: Let say you are making a game website and you have to call an API every 3–4 sec to get a current score or result of a game and whatever response coming you are setting in state and the score you are passing as a prop to render in another component(let’s say Score component) but Score component blinding displaying data with a big DOM tree and CSS. So Here we can use React Memo if only props are changed then Score will render.

Example 2: You are making a large website and a Component (lets’ say parent Component ) containing lots of Molecules ( small-functional component ) inside render function with different — different props. Now in the parent component, you are doing setState for a particular state value so render function will execute, and also all Molecule will execute again even there is no change in props for every Molecule. So in Molecule, we can use React Memo.

Now you have a clear idea where you have to use it.

Now let’s move into the code

Here is my folder structure

Folder Structure

Here App.js is parent component Home.js is child component without Memo and ReactMemo.js is child component with Memo.

import React, { Component } from 'react'
import Home from './Home'
import ReactMemo from './ReactMemo'
class App extends Component {
state = {
dataValue: "Vikash"
}
componentDidMount() {
this.timer = setInterval(() => {
this.setState({dataValue: "Vikash" })},
1000);
}
componentWillUnmount() {
clearInterval(this.timer)
}
render() {
return (
<div className="App" style={{textAlign:"center"}}>
<Home />
<p>-------------------- Homp Page --------------------</p>
<ReactMemo data={this.state.dataValue}></ReactMemo>
</div>
);
}
}
export default App;

App.js code

ScreenShot of App.js

setState will call Every 1 sec which is written inside the componentWillMount().

import React, { Component } from 'react'export default class Home extends Component {render() {
console.count(" Hello Vikash ")
return (
<div className="home-wrapper">
Hello Vikash
</div>
)
}
}

Home.js

Home.js

Every time setState will call inside App.js Home.js will render.

import React from 'react';export default React.memo((props)=>{
console.log(" React Memo - - ",props.data)
return (
<div>Render : {props.data}</div>
)
})
// const MyComponent = React.memo(function MyComponent(props) {// /* render using props */// });

it will render only once because there is no change in Props.

ReactMemo.js

Here is Gif of Output.

Output Gif

One Question is running in our mind “is there only one solution to stop unwanted rending”

The answer is NO.

We can achieve this using shouldComponentUpdate lifecycle or using PureComponent. But will not work in every situation.

I will discuss both of them in the next blog.

Thanks :)

Make the most of your learning experience with us

Trying to reduce time complexity :) :)