Skip to content
Related Articles
Get the best out of our app
GFG App
Open App
geeksforgeeks
Browser
Continue

Related Articles

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

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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 makes the application faster. The Memo API avoids unnecessary re-renders in functional components and thereby optimizing the performance of the application.

The Memo API is a HOC that takes in another functional component as a prop, and it will re-render the component only if there is any change in the props.

Prerequisites: Knowledge about react functional components.

Syntax:

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

Creating React App

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: Now the project folder structure looks like this.

Project Structure

Example (without using Memo): In this example, we will use a simple form to illustrate component re-rendering works without using React.memo

  • Edit the Header.js as below:

Javascript




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


In the Header.js we are simply rendering the Header component with props that displays the props passed from the Parent component.

  • Edit the App.js as below:

Javascript




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/ the following screen will be displayed.
 

Landing Screen

Type something in the input field and check the console

When we type in the input field, every time the state changes it causes react to render the <App/> component. Since <Header/> is a child component of <App/> it will also be re-rendered even though there is no change in the Header props. When you check the console it will be like the below.

Without Memo

Example (using Memo): Now edit the Header.js as below

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 refresh the page and enter the same input. Open the console and check again. 

With 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.

Reference: https://reactjs.org/docs/react-api.html#reactmemo


My Personal Notes arrow_drop_up
Last Updated : 19 Sep, 2022
Like Article
Save Article
Similar Reads
Related Tutorials