Why React.memo Often Fails to Prevent Re-renders and How to Fix It

React.memo prevents a component from re-rendering by performing a shallow, reference-based comparison of its props between renders. Because JavaScript treats two objects or functions with identical contents as unequal if they are different instances in memory, inline object literals and arrow functions passed as props create new references on every parent render, causing memo's comparison to always fail. This means wrapping a component in React.memo has no effect if its props include unstabilized objects or functions. The solution is to use useCallback for function props and useMemo for object props, which preserve the same reference across renders as long as dependencies remain unchanged. With stable references in place, React.memo's shallow comparison can correctly identify unchanged props and skip unnecessary re-renders.