Performance engineering in React isn't about writing code that runs faster; it's about writing code that runs less often. useMemo is your primary tool for skipping redundant computations.
1The Cache Protocol
Computers are fast, but complex operations (like sorting 5,000 items or calculating Prime numbers) can still take milliseconds. If these happen on every render (even when the data hasn't changed), you'll feel lag. useMemo caches the result of a function call. It only executes the function when its dependency array changes, effectively 'pausing' the computation cost until it's absolutely necessary.
2Referential Stability
In JavaScript, objects and arrays are compared by reference, not value. {} === {} is false. Every time a component renders, any objects defined inside it are brand new. If you pass these objects as props, React sees a 'change' and re-renders the child. useMemo ensures that your objects maintain a stable identity in memory, which is essential when using React.memo for child optimization.
