Component composition in React - Performance & Optimization

Performance: Component composition

MEDIUM IMPACT

Component composition affects rendering speed and responsiveness by how components are structured and reused in React apps.

Building UI by nesting components efficiently

React

const MemoizedChild = React.memo(function Child() {
  return <div>Static content</div>;
});
function Parent() {
  return <div>{Array(100).fill(null).map(() => <MemoizedChild />)}</div>;
}

Memoizing Child prevents re-render unless props change, reducing CPU work and improving responsiveness.

📈 Performance GainReduces re-renders from 100 to 1, improving INP and lowering CPU usage.

Building UI by nesting components efficiently

React

function Parent() {
  return <div>{Array(100).fill(null).map(() => <Child />)}</div>;
}
function Child() {
  return <div>{Math.random()}</div>;
}

Each Child component generates a new random number on every render causing all 100 children to re-render unnecessarily.

📉 Performance CostTriggers 100 re-renders on each Parent update, increasing CPU and blocking interaction.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Unmemoized nested components with changing props	High (many re-renders)	High (many layout recalculations)	High (many paints)	[X] Bad
Memoized components with stable props	Low (minimal re-renders)	Low (few layout recalculations)	Low (few paints)	[OK] Good

Rendering Pipeline

Component composition affects React's reconciliation and rendering phases, influencing how many components React must diff and update in the DOM.

→Reconciliation

→Commit (DOM Updates)

→Paint

⚠️ BottleneckReconciliation when many components re-render unnecessarily

Core Web Vital Affected

INP

Component composition affects rendering speed and responsiveness by how components are structured and reused in React apps.

Optimization Tips

1Memoize components to avoid unnecessary re-renders.

2Pass stable props to child components to prevent triggering updates.

3Avoid inline functions or objects as props inside render.

Performance Quiz - 3 Questions

How does using React.memo for child components affect performance?

A It causes more DOM nodes to be created.

B It increases bundle size significantly.

C It reduces unnecessary re-renders by memoizing output when props don't change.

D It delays initial page load.

DevTools: React DevTools Profiler

How to check: Open React DevTools, go to Profiler tab, record while interacting with the component, then inspect which components re-render and how long they take.

What to look for: Look for components that re-render frequently or take long to render; memoized components should show fewer renders.