useMemo Hook

Page Content:
1.Introduction
2.Syntax
3.Use-Case for useMemo
4.Dont Overuse useMemo

1.Introduction:

useMemo is a React hook that memorizes the output of a function.useMemo re-computes the memorized value when one of its dependency changes. This optimization helps to avoid expensive calculations on every render.

2.Syntax:

const memorizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useMemo accepts two arguments: a function body and a dependencies list.
1.useMemo will call the function and return its return value.
2.Every time you call useMemo again, it will first check if any dependencies have changed. If not, it will return the cached return value, won’t call the function. If the dependencies have changed, useMemo will call the provided function again and repeat the process.

3.Use-Case for useMemo:

useMemo helps to avoid expensive calculations on every render.

For example, if you have a function that has tons of calculations hence whenever your component will un-necessarily load this function on each render resulting in slowing down the component.

function squareNumber(){
    console.log("squared the number");
    for(var i=0;i<200000000;i++);
    return number*number;
}

If above code loads on each render then it will slow down your component.

To avoid this, we can load this function whenever the number changes else we provide the cached return value.

This can be achieved by using useMemo as below,

const squareNnumber = useMemo(() => {
    for(var i=0;i<20000000000;i++);
    return number*number;
  }, [number]);

1)Slow loading without useMemo:

import React,{useState,useMemo} from 'react';
 function App(){
 const [number,setNumber]=useState(0);
 const [theme,setTheme]=useState(false);
 const ThemeStyle={
   backgroundColor:theme?"black":"white",
   color:theme?"white":"black"
   }
 const square=squareNumber();
 function squareNumber(){
     console.log("squared the number");
     for(var i=0;i<200000000;i++);
     return number*number;
   }
 return(
  <>
  
{setNumber(parseInt(e.target.value))}}/>
  setTheme(!theme)} >change color

  
 {square}
 
  );
  }
 export default App;

Output:

Here you can feel the very slow changing of background theme ,this is because everytime the component renders it call sqaureNumber number function which slow down the component.

2)Avoid slow loading using useMemo:

import React,{useState,useMemo} from 'react';
 function App(){
 const [number,setNumber]=useState(0);
 const [theme,setTheme]=useState(false);
 const ThemeStyle={
   backgroundColor:theme?"black":"white",
   color:theme?"white":"black"
   }
 const square=useMemo(()=>{
     console.log("squared the number");
     for(var i=0;i<200000000;i++);
     return number*number;
   },[number]);
 return(
  <>
  
{setNumber(parseInt(e.target.value))}}/>
  setTheme(!theme)} >change color

  
 {square}
 
  );
  }
 export default App;

Output:

useMemo avoid the slow loading by checking the dependencies have changed or not. Hence when the theme changes it won’t load the squareNumber function again.

4.Don’t overuse useMemo:

1.Performance Overhead:

useMemo optimizes the perfomance but it is extra method to component which gets loaded on each render. If multiple useMemos are used then it results into perfomance overhead.

2.Memory Overhead:

useMemo saves the previous value in some memory variable to compare it with current value when component is re-rendered. If multiple useMemos are used then it results into more memory usage causing memory overhead.

Leave a Reply Cancel reply