Most React memoization is premature. useMemo on every derived value, useCallback on every function, React.memo on every component — this pattern adds comparison overhead and memory cost on every render, often with zero skipped renders to show for it. The component that receives an inline object literal as a prop will re-render regardless of how much memoization is layered inside it. The rule that should govern all of this: profile first, memoize second. Everything in this post builds on that. What React.memo actually does React.memo is a higher-order component that wraps a functional component and performs a shallow prop comparison before deciding whether to re-render. If the parent re-renders and passes the same props (by reference, for objects; by value, for primitives), React skips the child's render entirely. The key word is shallow . React.memo compares each prop using Object.is . For primitives ( string , number , boolean , null , undefined ), that's value equality.…