Open In App

Explain new features of React Memo in React v16.6 ?

Improve
Improve
Like Article
Like
Save
Share
Report

React memo is a Higher Order Component (HOC) introduced in React v16.6. As the name suggests, Memo API uses the memoization technique to optimize performance and make the application faster. The Memo API avoids unnecessary re-renders in functional components thereby optimizing the performance of the application.

We will see two different examples mentioned below:

Table of Content

Prerequisites:

Syntax:

const MeomizedComponent = React.memo(function MyAnotherComponent(props) {});

Steps to Create the React Application:

Step 1: Create a React App using the following command

npx create-react-app react-memo-tutorial

Step 2: After creating the project (i.e. react-memo-tutorial), move to it by using the following command.

cd react-memo-tutorial

Step 3: Create a file named Header.js in the src directory. 

Project Structure:

Project Structure

Approach 1: Without Using Memo

In this approach we will use a simple form to illustrate component re-rendering works without using React.memo In the Header.js we are simply rendering the Header component with props that displays the props passed from the Parent component.

Example: This example implements the above-mentioned approach

Javascript




//Header.js
import React from "react";
const Header = (props) => {
    console.log("Rendering header");
    return <div>{props.title}</div>;
};
export default Header;


Javascript




//App.js
import React, { useState } from "react";
import "./App.css";
import Header from "./Header";
const App = () => {
    console.log("Rendering Form");
    const [name, setName] = useState("");
    return (
        <div className="App">
            <Header title="Input Field" />
            <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
            />
        </div>
    );
};
export default App;


Output: Now open http://localhost:3000

Without Memo

Approach 2: Using Memo

Here, the <Header/> component is rendered only once on startup. It is not re-rendered whenever the state changes in the <App/> component. Since we are wrapping up the Header component inside the memo, it is not re-rendering the component when the prop doesn’t change.

Example: This example implements the above-mentioned approach

Javascript




import React from "react";
const Header = (props) => {
    console.log("Rendering header");
    return <div>{props.title}</div>;
};
 
// wrapping the component inside memo
export default React.memo(Header);


Output: Now open http://localhost:3000

With Memo



Last Updated : 22 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads