Blue Beltrules-of-hookslockPREMIUM

useMemo Cannot Run Per-Item Inside a .map() Loop

A developer wants to memoize an expensive per-item computation while rendering a list.

REACT_MODULE // 0x42

function ItemList({ items }) {
return (
<ul>
{items.map(item => {
const formatted = useMemo(() => expensiveFormat(item), [item]);
return <li key={item.id}>{formatted}</li>;
})}
</ul>
);
}

What is wrong with calling useMemo inside this .map() callback?

lock

This Drill is Locked

This is a premium drill. Continue on to the next free drill in the sequence.

CONTINUE DRILLarrow_forward