React.memo
React.memo is a higher-order component that skips re-rendering a component if its props haven't changed. It performs a shallow comparison of props by default and can accept a custom comparison function.
React.memo is a bouncer checking IDs — 'Same props? You're already inside, no need to enter again.' But if you keep getting a new ID (new reference) every time, the bouncer can't help you.
React.memo only prevents re-renders caused by parent re-rendering with the same props. It does NOT prevent re-renders from state changes or context changes inside the component. Common mistake: wrapping a component in React.memo while passing inline objects or functions as props — new references defeat the memo. You must combine React.memo with useMemo (for objects) and useCallback (for functions) on the parent side for it to be effective.
React.memo's shallow comparison checks every prop with Object.is. If any prop has a new reference, the component re-renders. The custom comparator receives (prevProps, nextProps) and returns true to skip rendering (opposite of shouldComponentUpdate). React.memo is applied to the component definition, not the usage site, so it affects all instances. In React 19 with the compiler, manual React.memo becomes unnecessary as the compiler can determine when components need re-rendering. Profile first — React.memo adds comparison overhead per render, which can be slower than just re-rendering for simple components.
React.memo skips re-rendering when props haven't changed via shallow comparison. I pair it with useMemo and useCallback on the parent to ensure stable prop references. It doesn't block re-renders from internal state or context changes. I always profile before memoizing — for simple components, the comparison overhead can exceed the rendering cost.
Wrapping everything in React.memo. For components that almost always receive different props, memo adds overhead without benefit. Also, React.memo doesn't prevent Context-triggered re-renders.