React.memo: Sure Shot Approach to Improve the Performance of Your React Application

So, we all got excited when React came up with blast in React version 16.6. And why don’t we? Any dedicated React developer would obviously be on cloud nine when the news of version 16.6 spilled out.

React showed up with various skilled features to improve the performance of React app and to make React better than before. Boom! They succeeded! Cheers!
In this article, we would be focussing on a basic overview of how to work with react memo, not useMemo! People often get confused between these two because of their names. Further, we would discuss its impact on the performance of React app.

Let’s get started.

Okay, now what the heck is React.Memo?

We all are aware of the heaviness of render method in a react application. Aren’t we? We know the consequences of rendering the component without any major changes. So, consider a scenario in which you are rendering a class component even when your input props are the same. Is it appropriate? Obviously, it’s not! Why the heck will you call such a heavy render method when input props are constant. In this particular case, you ought to use PureComponent or shouldComponentUpdate( ). Wait, this was the scenario of class component, what about functional (stateless ) component? Don’t worry; there’s a solution for it too: React.Memo.

React.memo: High Order Component.

In case, your functional component renders exact same result, because it receives the same input props, you can wrap into React.memo for boosting the performance. This means that the react will compare the last render with the current one, and if no changes are noticed, then it will skip rendering the component. This will help in increasing the performance of react app.

You can wrap your functional component into React.memo, as shown below:

const MyExampleOfMemo = React.memo(function MyComponent(props) {
  /* render using props */});

If you choose not to pass any second argument, react will compare using its default behavior: shallow comparison of complex objects in the props object. But, if you decide to pass the second argument, then you are given control over the comparison (i.e. you can make your custom comparison function)

function MyExampleComponent(props) {
  /* render using props */}
function equalOrNot(prevProps, nextProps) {
  /*
  It will return true if nextProps to render would return
  the same result as prevProps to render,
  otherwise return false
  */}
export default React.memo(MyExampleComponent, equalOrNot);

Be careful, while using React.memo. As it can generate bugs.

React.Memo to the rescue, Phew!

Let’s take a simple example, to make the need of React.Memo clear.

Let’s make a small app that make use of setState( ) every second: that calls render every second. I know this is not feasible, but this is just to clear that why do we need React.memo.

class App extends Component {
  cities = ["Mumbai", "Banglore", "Delhi"];
  state = { city: "Anonymous" };

  componentDidMount() {
    setInterval(() => {
      const city = this.generateCity();
      this.setState({ city });
    }, 1000);
  }

  generateCity = () =>
    this.cities[Math.floor(Math.random() * this.cities.length)];

  render() {
    return ;
  }
}

Here, we can see that we called a function named setInterval in componentDidMount(). Which indeed sets the city name from the array of cities, for that we have another function called generateCity( ).

A thing to keep in mind is that the setState( ) will be called every second, and because of this is the component will be re-rendered every second. Therefore, our View component gets render too, no matter the city is hard coded. Is it feasible? Of course not.

const View = ({ city }) => `City name :: ${city}`;

This doesn’t make sense. Why would we re-render a component (here View component) if the props remain same?

Now, as we are aware of the concept of memoization from the content mentioned above. We can use React.memo to restrict the render of the component if the value of props doesn’t change.

Let’s wrap < View / > component in a memo.

import { memo } from 'React';

const View = memo(({ city }) => `City name :: ${city}`);

Now, we can notice that the < View / > component will only render one time because the value of prop city doesn’t change.

This was the scenario when the prop was hardcoded. Let’s see what will happen if we choose to replace the hardcoded value with state value.

In the function generateCity( ), the value of the city is randomly chosen from the array of cities.

So, whenever the same value is assigned to the city, the component won’t render, because of city prop will consequently hold the same value.

Memoization!!

Don’t get confused between React.memo and useMemo.

Don’t go on their names; they have their different functionality.

We can say that both React.memo and useMemo uses the concept of Memoization but still both hold their individualities.

React.memo optimizes the performance of react app by controlling the render of various components. You can have control over a whole component: whether to render it or not.

On the other hand, useMemo doesn’t provide such vast control. It is used for more general purpose and intends to return memoized value. useMemo is a hook and has general usage rules.

Conclusion

So, a long journey isn’t it?

But we finally reached our destination.

The bottom line is, React.memo optimize the react application by avoiding those renders where prop doesn’t change. But be careful while optimizing the performance, as it could generate bugs. To get it done in a smooth and hassle-free way leverage our top-of-the-line React development services and hire Reactjs developers from us to save your valuable time and cost.

Happy Reading!