Avoiding unnecessary renders in React - Performance & Optimization

Performance: Avoiding unnecessary renders

HIGH IMPACT

This concept affects how fast the UI updates and how responsive the app feels during user interactions.

Rendering a list of items where only some items change

React

const Item = React.memo(function Item({ data }) {
  console.log('Render:', data.id);
  return <div>{data.name}</div>;
});

function ItemList({ items }) {
  return items.map(item => <Item key={item.id} data={item} />);
}

React.memo prevents re-rendering Item components if their props have not changed.

📈 Performance GainReduces re-renders to only changed items, improving responsiveness and lowering CPU load.

Rendering a list of items where only some items change

React

function ItemList({ items }) {
  return items.map(item => <Item key={item.id} data={item} />);
}

function Item({ data }) {
  console.log('Render:', data.id);
  return <div>{data.name}</div>;
}

All Item components re-render whenever the parent ItemList re-renders, even if their data did not change.

📉 Performance CostTriggers N re-renders for N items on every parent update, causing slow UI and high CPU usage.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Without memoization	Many unnecessary DOM updates	Many reflows triggered	High paint cost due to frequent updates	[X] Bad
With React.memo	Only necessary DOM updates	Minimal reflows	Lower paint cost with fewer updates	[OK] Good

Rendering Pipeline

When React re-renders a component, it recalculates the virtual DOM and then updates the real DOM if needed. Avoiding unnecessary renders reduces the work in virtual DOM diffing and real DOM updates.

→Virtual DOM Diffing

→Real DOM Update

→Paint

⚠️ BottleneckReal DOM Update is most expensive because it triggers layout and paint.

Core Web Vital Affected

INP

This concept affects how fast the UI updates and how responsive the app feels during user interactions.

Optimization Tips

1Use React.memo to prevent re-renders when props do not change.

2Keep props stable by avoiding inline functions or objects unless memoized.

3Profile your app to find and fix components that render too often.

Performance Quiz - 3 Questions

What is the main benefit of using React.memo for a component?

A It reduces the bundle size of the app.

B It makes the component load faster initially.

C It prevents the component from re-rendering if its props have not changed.

D It automatically caches API data for the component.

DevTools: React Developer Tools Profiler

How to check: Open the Profiler tab, record while interacting with the component, and observe which components re-render.

What to look for: Look for components that re-render frequently without prop changes; these indicate unnecessary renders.