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.
Contents
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
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.
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); }
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!
E-commerce has transformed the way consumers shop for products and services and interact with businesses.…
The e-commerce world is constantly in flux. New tech and strategies emerge daily to help…
Hello Magento Friends, In today’s blog, we will discuss adding a header and footer to…
Hello React Native Friends, Building a visually appealing and responsive mobile app is crucial in…
We're thrilled to announce the release of Hyvä Themes 1.3.6 and 1.3.7! These latest updates…
Your e-commerce platform is surging - orders are rolling in, traffic spikes are becoming the…