JAVASCRIPT
Caching Expensive Computations with `useMemo`
Optimize React component performance by memoizing the result of expensive calculations using `useMemo`, preventing re-computation on every render.
import React, { useState, useMemo } from 'react';
function calculateExpensiveValue(num) {
console.log('Calculating expensive value...');
let sum = 0;
for (let i = 0; i < 100000000; i++) {
sum += i;
}
return num * sum;
}
function MemoizedValueComponent() {
const [number, setNumber] = useState(1);
const [dark, setDark] = useState(false);
// useMemo caches the result of calculateExpensiveValue.
// It only re-runs if 'number' changes.
const expensiveValue = useMemo(() => {
return calculateExpensiveValue(number);
}, [number]);
const themeStyle = {
backgroundColor: dark ? 'black' : 'white',
color: dark ? 'white' : 'black',
padding: '20px',
margin: '20px'
};
return (
<div style={themeStyle}>
<h1>useMemo Example</h1>
<input
type="number"
value={number}
onChange={(e) => setNumber(parseInt(e.target.value))}
/>
<button onClick={() => setDark(prevDark => !prevDark)}>
Toggle Theme
</button>
<p>Expensive Value: {expensiveValue}</p>
<p>Theme is {dark ? 'Dark' : 'Light'}</p>
</div>
);
}
export default MemoizedValueComponent;
How it works: The `useMemo` hook is used to memoize the result of an expensive calculation or object creation. It takes a function that returns a value and a dependency array. The value will only be re-calculated if one of the dependencies in the array changes. This prevents unnecessary re-computation of values on every render, which is crucial for optimizing performance in components with heavy calculations, ensuring that updates to unrelated state do not trigger these expensive operations.