Drills Repository
8 Drills · All Belts · react-memo
React.memo Component Updating Local State
React.memo only skips a re-render that would have been triggered by the parent passing unchanged props, and it has no effect on renders triggered by other sources. Here the component calls its own setState, so React schedules a normal re-render for it regardless of what the parent's props looked like.
React.memo With an Inline Object Prop
React.memo compares props using shallow equality via Object.is, not deep value comparison. Here, the settings object literal is recreated on every parent render, so Profile receives what looks like a new prop each time and re-renders.
React.memo With Identical Parent Props
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.
React.memo Default Prop Comparison
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.
Wrapping Every Component in React.memo
React.memo only pays off when a component re-renders often with unchanged props and the render work itself is expensive enough for the comparison to be worth it. Wrapping nearly every component by default adds an extra props comparison and cognitive overhead everywhere, even for cheap components that rarely benefit from skipping a re-render.
React.memo With an Inline Callback Prop
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. Here, the onSave callback is rebuilt on every parent render, so the child re-renders even though onSave still calls save with the same id.
React.memo Receiving an Inline Function Prop
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.
Custom arePropsEqual and a Changed onClick
Functions in React capture props and state through closures at the time they were created. If a custom arePropsEqual function incorrectly treats a changed onClick reference as equal, React skips re-rendering and the component keeps using a stale handler from an earlier render.