Memo

• Used to prevent from re-rendering of child component due to the parent component

// Mother.js
import react, { useEffect, useState, useMemo, useCallback } from "react";
import Son from "./Son";

const functions: Set<any> = new Set();

const Mother = () => {
  console.log("I am Mother !! ");
  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(0);
  // The son only be re-rendered when num2 is changed
   return (
       <div>
           <button onClick={() => setNum2(num1 + 1)}> change num 1 </button>
           <button onClick={() => setNum2(num2 + 1)}> change num 2 </button>
           <Son
               state2 = {num2}
           />
       </div>
   )
};
export default Mother;

// Son.js
import React, { useEffect, memo } from "react";
const Son = memo(({state2}) => {
    useEffect(()=>{
        console.log("re-render Son" );          
    })
    return (
        <div>
            <span>Son{state1} {state2}</span>
        </div>
    )
})


export default Son;

• The son will only be rerendered if the state2 is changed