React useMemo Hook

This hook use with functional component.

Also called Higher order component.

Improve App Performance.

Store Memoized Value.

Run this below code and see the difference in console. if we click on count button then show incrementData count in console.

App.js file code

import { createContext, useState } from 'react';

import MemoHook from './Pages/MemoHook';

function App() {

 

  return (

    <div className="App">

      <MemoHook />

    </div>

  );

}

export default App;

Pages/MemoHook.js file code

import React, { useMemo, useState } from "react";

function MemoHook() {

    let [count, setCount] = useState(2);

    let [item, setItem] = useState(22);

   

    console.log("MemoHook count: ", count);

    console.log("MemoHook item: ", item);  

    let incrementData = useMemo(() => {

        console.log('incrementData--->', count, item);        

    }, [count]);

   

    return(        

        <>

            <h3>MemoHook Example : Count {count} : Item {item}</h3>

            {incrementData}

            <button onClick={() => { setCount(count+1); }}>Click Count</button>

            <button onClick={() => { setItem(item+1); }}>Click Item</button>

        </>

    );

}

export default React.memo(MemoHook);