React.js useMemo

useMemo() is used to

Store calculated value

It prevents recalculating data on every render.

Syntex:

const value = useMemo(() => {
 return calculation;
}, [dependency]);

Example Without useMemo

function App() {
 const [count, setCount] = useState(0);
 const total = [1, 2, 3, 4, 5].reduce(
   (sum, num) => sum + num,
   0
 );
 console.log("Calculation running");
 return (
   <>
     <h1>{total}</h1>
     <button onClick={() => setCount(count + 1)}>
       {count}
     </button>
   </>
 );
}

Problem:

Calculation runs every button click

Example With useMemo

import { useMemo, useState } from "react";
function App() {
 const [count, setCount] = useState(0);
 const total = useMemo(() => {
   console.log("Calculation running");
   return [1, 2, 3, 4, 5].reduce(
     (sum, num) => sum + num,
     0
   );
 }, []);
 return (
   <>
     <h1>{total}</h1>
     <button onClick={() => setCount(count + 1)}>
       {count}
     </button>
   </>
 );
}
export default App;

Now calculation runs only once.