useMemo() / useCallback()
hook
React 16.8
useMemo caches an expensive computed value; useCallback caches a function reference between renders.
Syntax
const memoized = useMemo(() => compute(), [deps])
Example
javascript
import { useMemo, useCallback } from 'react';
function ProductList({ products, filter }) {
// Only recompute when products/filter changes
const filtered = useMemo(() =>
products.filter(p => p.category === filter),
[products, filter]
);
// Stable function reference
const handleClick = useCallback((id) => {
console.log('Product:', id);
}, []);
return filtered.map(p => <Product key={p.id} onClick={handleClick} {...p} />);
}