React.memo usage - Performance & Optimization

Performance: React.memo usage

MEDIUM IMPACT

React.memo affects how often a component re-renders, impacting interaction responsiveness and CPU usage.

Preventing unnecessary re-renders of a functional component when props do not change

React

const MyComponent = React.memo(function MyComponent(props) {
  return <div>{props.value}</div>;
});

// Used with memo
<MyComponent value={someValue} />

Component skips re-render if props are shallowly equal, reducing CPU and rendering work.

📈 Performance GainAvoids unnecessary re-renders, improving interaction responsiveness (INP).

Preventing unnecessary re-renders of a functional component when props do not change

React

function MyComponent(props) {
  return <div>{props.value}</div>;
}

// Used directly without memo
<MyComponent value={someValue} />

Component re-renders every time parent renders, even if props are unchanged.

📉 Performance CostTriggers re-render and layout recalculation on every parent update, increasing CPU usage.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Without React.memo	Re-renders component every parent update	Triggers reflows if DOM changes	Higher paint cost due to frequent updates	[X] Bad
With React.memo	Skips re-render if props unchanged	No reflows if DOM unchanged	Lower paint cost by avoiding updates	[OK] Good

Rendering Pipeline

React.memo wraps a component and compares new props with previous props before deciding to re-render. If props are unchanged, React skips the render phase for that component, reducing work in the rendering pipeline.

→Reconciliation

→Render

→Commit

⚠️ BottleneckRender phase (re-rendering components unnecessarily)

Core Web Vital Affected

INP

React.memo affects how often a component re-renders, impacting interaction responsiveness and CPU usage.

Optimization Tips

1Use React.memo to avoid re-rendering components when props do not change.

2Avoid memoizing components with frequently changing props to prevent overhead.

3Profile your app to confirm React.memo improves performance in your case.

Performance Quiz - 3 Questions

What is the main performance benefit of using React.memo?

A It prevents re-rendering when props have not changed.

B It reduces the initial bundle size.

C It improves CSS loading speed.

D It delays rendering until user interaction.

DevTools: React DevTools Profiler

How to check: Record a profiling session while interacting with the app. Look for components that re-render frequently. Check if memoized components skip re-render when props don't change.

What to look for: Reduced number of renders for memoized components compared to non-memoized ones indicates good performance.