It is used to optimize performance and only call the function when needed. It basically cache the result of invoked function.
function App() {
const [valueFirst, setValueFirst] = useState(0);
const [valueSecond, setValueSecond] = useState(0);
const increaseValueFirstHandler = ()=>{
setValueFirst(valueFirst+1);
}
const increaseValueSecondHandler = ()=>{
setValueSecond(valueSecond+1);
}
/**
* Here memo is used so that this function will not be called when
* valueSecond changed.
*/
const isEvenNumber = useMemo( ()=>{
console.log("Calculate even number of first ");
return valueFirst %2 === 0 ? 'Even' : 'Odd';
},[valueFirst] );
return (
<div className="App">
<button onClick={increaseValueFirstHandler}>Click First value = {valueFirst}</button>
<p>First Value is {isEvenNumber}</p>
<button onClick={increaseValueSecondHandler}>Click Second value = {valueSecond}</button>
</div>
);
}