JAVASCRIPT
Optimizing Performance with useMemo for Expensive Calculations
Boost React app performance by using the useMemo hook to memoize the results of computationally expensive functions, preventing recalculations on every render for unchanged dependencies.
import React, { useState, useMemo } from 'react';
// An intentionally expensive calculation function
const calculateExpensiveValue = (num) => {
console.log('Performing expensive calculation...');
// Simulate a long calculation
let result = 0;
for (let i = 0; i < 100000000; i++) {
result += Math.sqrt(num + i);
}
return result;
};
function ExpensiveCalculationComponent() {
const [number, setNumber] = useState(10);
const [multiplier, setMultiplier] = useState(2);
// Use useMemo to memoize the result of calculateExpensiveValue
// This function will only re-run if 'number' changes.
const memoizedExpensiveValue = useMemo(() => {
return calculateExpensiveValue(number);
}, [number]);
return (
<div>
<h2>Expensive Calculation Example</h2>
<p>Number: <input type="number" value={number} onChange={e => setNumber(Number(e.target.value))} /></p>
<p>Multiplier: <input type="number" value={multiplier} onChange={e => setMultiplier(Number(e.target.value))} /></p>
<p>Memoized Expensive Value: {memoizedExpensiveValue}</p>
<p>Result with Multiplier: {memoizedExpensiveValue * multiplier}</p>
<p>Changing the multiplier does NOT re-run the expensive calculation!</p>
</div>
);
}
export default ExpensiveCalculationComponent;
How it works: The `useMemo` hook is crucial for optimizing performance in React by memoizing computationally expensive calculations. In this example, `calculateExpensiveValue` is a simulated heavy function. By wrapping its call within `useMemo` and providing `[number]` as its dependency array, the function will only re-execute if the `number` state changes. If `multiplier` (or any other unrelated state) changes, causing a re-render, `memoizedExpensiveValue` will return the previously calculated result without re-running the expensive calculation, significantly improving responsiveness.