For components that perform heavy computations, useMemo
can cache the result of a calculation, recomputing it only when its dependencies change.([Content That Scales][5])
import React, { useState, useMemo } from 'react';
function ExpensiveComponent({ data }) {
const processedData = useMemo(() => {
// Expensive computation
return data.map(item => /* processing */ item);
}, [data]);
return <div>{/* render processedData */}</div>;
}