Memoization In React

Introduction

Memoization is one of the performance optimization techniques that aims to speed up the render process of components. In this article, we are going to explore what is Memoization and how to implement Memoization in React applications.

Memoization in React

Memoization is an optimization technique to increase the performance of the application by storing the results and returning the cached result when the same inputs occur again.
It is a type of caching technique.
React.memo or useMemo is used to optimize the performance with the help of caching the components in React.
React.memo is a higher-order component and it’s similar to React.PureComponent but for using functional components instead of class components.
When a functional component is rendered using React.Memo or useMemo then its result is saved in the memory and next time when the component gets called with the same props then the cached result will return without any execution.

When can use Memoization

If the function is consistently receiving the same argument values, then use memoization to avoid redundant computing for the same.
We can use memoization to perform heavy and time-consuming computing, so storing the result might help to save some processing time.

When shouldn't use Memoization

To be able to memoize, the function must be a pure function.
If space is critical than computation time, then don't use memoization.
If your function is less frequently executed and computing time also less then, there is no much benefit of using memoization.

Example

I have created a simple application with three components which are App, Counter1, and Counter2.

In the App component, render the Counter1 and Counter2 components passing the state value as props. Pass the count1 state value to the Counter1 component and the count2 state value to the Counter2 component. Just display those values in the corresponding components.

render() {
    return (
      <>
        <Counter1 Count={this.state.count1} />
        <br />
        <Counter2 Count={this.state.count2} />
        <br />
        <button onClick={this.onClick}>Increment</button>
      </>
    );
}

// Counter1.js

import React from "react";

const Counter1 = (props) => {

  console.log("Counter1 Component Rendering");
  return (
    <>
      <h1>Counter1 Component</h1>
      {props.Count}
    </>
  );
}

export default Counter1;

// Counter2.js

import React from "react";

const Counter2 = (props) => {

  console.log("Counter2 Component Rendering");
  return (
    <>
      <h1>Counter2 Component</h1>
      {props.Count}
    </>
  );
}

export default Counter2;

I have created one button called "Increment" in the App component and increment the count2 state value on the button click event(onClick).

onClick() {
	let count = this.state.count2;
	this.setState({ count2: count + 1 });
}

Without Memoization

When I clicked the button, the count2 value will increment and the Counter2 component will be updated with the latest value (the Counter2 component will re-render). The expected thing is only the Counter2 component should re-render. But the Counter1 component also getting re-rendered with the Counter2 component. Because of the updating of state value in the App component. Even there is no change in count1 state value, the Counter1 component getting re-rendered.

With Memoization

The expected thing is If I click the button then, only both the count2 value and Counter2 component will be updated and the Counter1 component should be idle. We can achieve it by adding the Memoization to the Counter1 component. I have added React.memo to the Counter1 component. React.memo will prevent re-rendering the Counter1 component if there are no changes in Counter1 component props. Now, the Counter1 component won't re-render whenever clicks the button.

// Counter1.js
import React from "react";
const Counter1 = (props) => {
  console.log("Counter1 Component Rendering");
  return (
    <>
      <h1>Counter1 Component</h1>
      {props.Count}
    </>
  );
}
export default React.memo(Counter1); // Added Memoization

Summary

Memoization means storing the results and returning the cached result when the same inputs occur again.
Memoization will help to improve the performance of the application.
Implement the Memoization using React.Memo or useMemo.

I hope you have liked it and know about Memoization and how to implement it in React applications.