useMemo hook reactJs

 It is inbuild hook in reactJs. It allows you to avoid calling function them on every render. it means react uses Virtual DOM. if we do any change in component, so it will affect whole component. if it have any function it is run or execute automatically. that's why we need to avoid it. 

    The React useMemo hook return a memoized value. Think of previous blog about memoization. it catching value that dois not need to be recalculate. useMemo only run where its dependencies update. This can improve you application performance. 

import React, { useMemo, useState } from 'react'
const Memo = () => {
    const [counterOne, setCounterOne] = useState(0);
    const [counterTwo, setCounterTwo] = useState(0);
    const Increment = () => {
        setCounterOne(counterOne + 1);
    }
    const decrement = () => {
        setCounterTwo(counterTwo + 2);
    }
    const isEven = useMemo(() => {
        console.log('isEven Function Run');
        return counterOne % 2 === 0;
    }, [counterOne])
    return (
        <>
            <h1>{isEven ? "Even" : "Odd"}</h1>
            <button onClick={Increment}>Increment : {counterOne}</button>
            <button onClick={decrement}>decrement : {counterTwo}</button>
        </>
    )
}
export default Memo

This isEven() function run when user click counterOne button because. useMemo dependencies is counterOne.