When React.memo actually improves component performance

You’re debugging a sluggish React dashboard. A table of 50 rows flickers on every filter change, even though the data rarely updates. The component looks fine, but the browser work is wasted. The culprit is often a missing or misapplied React.memo. When props change by reference, memo skips the render; when they don’t, every parent state update cascades down, and memo does nothing.

When React.memo actually prevents re-renders

React.memo performs a shallow comparison of every prop. If a prop’s reference stays the same between renders, the component skips its render cycle entirely. This works beautifully for function components passing primitive values—strings, numbers, booleans—because their references don’t change unless you explicitly create new values.

Shallow prop comparison

Consider a simple display component:

const CountDisplay = React.memo(({ number }) => { console.log('Render called'); return {number}; });

If the parent passes number={state.count} and state.count stays at 42 across renders, React.memo will skip the render because 42 is value-equal. If the parent re-renders with number={state.count + 1}, the prop value changes and the component renders again.

When memo falls short

• Creating a new object literal in the parent’s render: props={{ filter: filterValue }}
• Spreading state into props: props={{ ...item }}
• Array indices shifting on splice operations

In these cases, every render creates a new reference, so React.memo always finds a difference and the component re-renders. The fix is to memoize the prop itself.

Stabilizing props with useMemo

When you need React.memo to actually skip renders, stabilize the prop so its reference doesn’t change unless the underlying data changes. useMemo returns a cached reference based on its dependency array.

const FilteredTable = ({ items, filter }) => { const stableProps = useMemo(() => ({ filteredItems: filterItems(items, filter) }), [items, filter]); return ; };

Wrapping the prop object with useMemo ensures that as long as items or filter haven’t changed, the reference stays the same, and React.memo will skip the child render.

Verifying with React DevTools Profiler

The most reliable way to confirm memo’s effect is the Profiler panel. Open DevTools, switch to the Profiler tab and check Record. Interact with your app then examine the Render Count column. Compare a memoized component against an identical one without memo. You should see the memoized version’s count stay flat when props reference doesn’t change, while the non-memoized version increments.

Practical check: Add a console.log or the Profiler’s Highlight updates mode. If the memoized component's render count doesn't budge after many parent updates memo is working. If it still re-renders inspect whether props are being stabilized.

Version constraints and automatic batching

React.memo has been available since React 16.8 (alongside hooks). It works identically in React 18. Automatic batching in React 18 groups multiple state updates into a single render cycle which can make render frequency appear lower but it doesn’t alter memo’s core shallow‑comparison logic. A memoized component still skips its render when props are reference‑equal regardless of batching state.

Recovery: when to stop using memo

Over-memoizing components with frequently changing props increases memory usage and can degrade performance because React must run the comparison on every parent render. If a component's props change on every cycle React.memo provides no benefit and adds overhead. Remove memo and the useMemo wrapper, profile again and assess whether the component's own rendering cost outweighs the comparison cost.