🧪 Memo

Memo

README.md

@@ -207,3 +207,5 @@ export default ClassClick;
 ### [Component Lifecycle Methods](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/bbbbe658941b4920312e960cf7c208125d48ce01)
 
 ### [Fragment](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/034c6f8150393531f612a95789cb5fa3469efe8c)
+
+### [Pure Components](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/9ececc6e611790b360fc76a60406f2f408bbc9df)

src/components/MemoComp.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+function MemoComp({ name }) {
+  console.log("Memo Component");
+  return <div>{name}</div>;
+}
+
+export default React.memo(MemoComp);
+
+// Memo Component
+/* 
+Pure Component work with class base component do same thing in function component using React.memo
+Using memo will cause React to skip re-rendering a component if its props have not changed.
+All do in export default React.memo(pass component as argument)
+React.memo is high order component.
+It is similar to React pure component but it works in function component.
+*/

src/components/ParentComp.js

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import MemoComp from "./MemoComp";
 import PureComp from "./PureComp";
 import RegComp from "./RegComp";
 
@@ -24,23 +25,12 @@ export class ParentComp extends Component {
     return (
       <div>
         Parent Component
-        <PureComp name={this.state.name} />
-        <RegComp name={this.state.name} />
+        {/* <PureComp name={this.state.name} /> */}
+        {/* <RegComp name={this.state.name} /> */}
+        <MemoComp name={this.state.name} />
       </div>
     );
   }
 }
 
 export default ParentComp;
-
-// Pure Component
-/*
-ReactJS has provided us a Pure Component. If we extend a class with Pure Component, there is 
-no need for shouldComponentUpdate() Lifecycle Method. ReactJS Pure Component Class compares 
-current state and props with new props and states to decide whether the React component should 
-re-render itself or Not.
-If the previous value of state or props and the new value of state or props is the same, the 
-component will not re-render itself. Since Pure Components restricts the re-rendering when there 
-is no use of re-rendering of the component. Pure Components are Class Components which extends 
-React.PureComponent.
-*/

src/components/PureComp.js

@@ -8,3 +8,15 @@ class PureComp extends PureComponent {
 }
 
 export default PureComp;
+
+// Pure Component
+/*
+ReactJS has provided us a Pure Component. If we extend a class with Pure Component, there is 
+no need for shouldComponentUpdate() Lifecycle Method. ReactJS Pure Component Class compares 
+current state and props with new props and states to decide whether the React component should 
+re-render itself or Not.
+If the previous value of state or props and the new value of state or props is the same, the 
+component will not re-render itself. Since Pure Components restricts the re-rendering when there 
+is no use of re-rendering of the component. Pure Components are Class Components which extends 
+React.PureComponent.
+*/