JAVASCRIPT
Optimize Expensive Calculations with React's useMemo
Improve React component performance by memoizing the result of expensive calculations, preventing unnecessary re-renders and re-executions with the useMemo hook.
import React, { useState, useMemo } from 'react';
// A dummy expensive calculation function
const calculateFactorial = (n) => {
console.log(`Calculating factorial for ${n}...`);
if (n < 0) return -1;
if (n === 0) return 1;
let result = 1;
for (let i = 1; i <= n; i++) {
result *= i;
}
return result;
};
const MemoizedFactorialComponent = () => {
const [number, setNumber] = useState(1);
const [reRenderTrigger, setReRenderTrigger] = useState(0);
// useMemo will re-run calculateFactorial ONLY if 'number' changes
const factorial = useMemo(() => calculateFactorial(number), [number]);
return (
<div>
<h1>Factorial Calculator</h1>
<input
type="number"
value={number}
onChange={(e) => setNumber(parseInt(e.target.value, 10))}
/>
<p>Factorial of {number} is: {factorial}</p>
<button onClick={() => setReRenderTrigger(reRenderTrigger + 1)}>
Trigger Re-render (without changing number)
</button>
<p>Re-render count: {reRenderTrigger}</p>
</div>
);
};
const App = () => <MemoizedFactorialComponent />;
How it works: This snippet illustrates `useMemo` for optimizing performance. The `calculateFactorial` function is intentionally CPU-intensive. By wrapping its call within `useMemo`, React will only re-execute `calculateFactorial` when its dependencies (in this case, `number`) change. If the component re-renders due to other state changes (e.g., `reRenderTrigger`), `useMemo` will return the previously computed `factorial` value, avoiding the costly re-calculation and improving efficiency.