Optimizing Component Performance with useMemo

The useMemo hook in React is used to memoize (remember) the result of a function so that it's not recalculated every time the component re-renders. This can be particularly useful for optimizing performance when dealing with expensive function calls.

import { useMemo } from 'react'; function Example() { const calculate = (numbers) => { let sum = 0; numbers.forEach((number) => { sum += number; }); return sum; }; const numbers = [1, 2, 3, 4, 5]; const total = useMemo(() => calculate(numbers), [numbers]); return ( 
 The sum of numbers is: {total} 
 ); }

In this example, useMemo ensures that the calculate function is only called when the numbers array changes, thus optimizing component performance by avoiding redundant calculations.