Drills Repository
8 Drills · All Belts · react-memo
inline object breaks memoization
React.memo compares props using shallow equality via Object.is, not deep value comparison. Two separately created object literals with identical contents are still different references, so React treats the prop as changed.
memoized component still re-renders from state
memo only prevents unnecessary re-renders caused by unchanged parent props. A component's own state updates still schedule renders normally.
memo without stable function props
Functions created during rendering receive a new reference on every render, and since memo relies on shallow comparison with Object.is, that new reference breaks memoization. This forces a re-render even when the callback's behavior is unchanged.
memo broken by new function props
Every function or arrow function expression creates a brand-new function object on each render. Because memo compares props by reference identity, the child receives what looks like a different prop each render and re-renders accordingly.
memo is not a render guarantee
memo is an optimization hint, not a strict rendering guarantee. React may still re-render memoized components in some situations, and memoized components also re-render when their own state or consumed context changes.
shallow equality in memo
By default, memo performs shallow prop comparison using Object.is on each prop. Primitive values with the same value compare equal, but newly created objects, arrays, and functions compare unequal because their references differ.
unnecessary global memoization
memo only helps when components frequently re-render with identical props and rendering is expensive enough to matter. Blanket memoization often adds cognitive overhead without measurable performance gains.
custom arePropsEqual stale closure bug
Functions in React capture props and state through closures at the time they were created. If a custom arePropsEqual function incorrectly treats a changed callback reference as equal, React skips rendering and the component continues using a stale handler from an earlier render.