Hello ReactJS friends,
In today’s blog, we will learn about useMemo Hook in ReactJS.
Previously we have discussed various types of hooks in ReactJS.
React useMemo Hook
The React useMemo Hook is used in the functional component and returns a memoized value. Memoization is used when you want to avoid recomputing the function for the next time for a given set of arguments. The memoization function remembers the result of a given set of inputs, so when the parameters are passed again, it returns the stored result without computing the function.
useMemo() is a built-in React hook that accepts two arguments — a function compute that computes a result and the dependencies array
Syntax of useMemo Hook in ReactJS:
const memoizedResult = useMemo(compute, dependencies);
const memoizedResult = useMemo(() =>
{
return expensiveFunction(propA, propB);
}, [propA, propB]);
The React useMemo Hook returns a memoized value. The useMemo Hook only runs when one of its dependencies updates. That’s the nature of the useMemo() hook.
Example of useMemo Hook in ReactJS:
import { useState } from 'react';
export function CalculateFactorial()
{
const [number, setNumber] = useState(1);
const [inc, setInc] = useState(0);
const factorial = factorialOf(number);
const onChange = event =>
{
setNumber(Number(event.target.value));
};
const onClick = () => setInc(i => i + 1);
return (
<div>
Factorial of
<input type="number" value={number}
onChange={onChange} />
is {factorial}
<button onClick={onClick}>Re-render</button>
</div>
);
}
function factorialOf(n)
{
console.log('factorialOf(n) called!');
return n <= 0 ? 1 : n * factorialOf(n - 1);
}
Conclusion:
This was all about the useMemo hook in ReactJS. If you have any doubts, kindly get in touch with me through the comment section. To learn more about ReactJS, stay connected with us.
Happy Coding!