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.jsimport React from "react";const Header = (props) => { console.log("Rendering header"); return <div>{props.title}</div>;};export default Header; |
Javascript
//App.jsimport 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
Explain new features of React Memo in React v16.6 ?
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
- Without Using Memo
- Using Memo