Component organization in React - Performance & Optimization

Performance: Component organization

MEDIUM IMPACT

This affects the rendering speed and responsiveness by controlling how React updates and re-renders components.

Splitting UI into components to improve rendering performance

React

function StaticText() {
  return <p>Some static text that never changes</p>;
}

function Counter({ count, onIncrement }) {
  return (
    <>
      <h1>Counter: {count}</h1>
      <button onClick={onIncrement}>Increment</button>
    </>
  );
}

function App() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <Counter count={count} onIncrement={() => setCount(count + 1)} />
      <StaticText />
    </div>
  );
}

Separates static and dynamic parts so only Counter re-renders on state change, StaticText stays untouched.

📈 Performance GainReduces re-render scope, lowering paint cost and improving interaction responsiveness

Splitting UI into components to improve rendering performance

React

function App() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Some static text that never changes</p>
    </div>
  );
}

All UI is in one component, so any state change causes the entire component to re-render, including static parts.

📉 Performance CostTriggers full component re-render and repaint on every state update

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Single large component	Many nodes updated on state change	Multiple reflows per update	High paint cost due to full re-render	[X] Bad
Small focused components	Only changed components update DOM	Single or minimal reflows	Lower paint cost, faster updates	[OK] Good

Rendering Pipeline

When state changes, React reconciles the component tree. Smaller, well-organized components limit the number of nodes React must diff and update, reducing layout and paint work.

→Reconciliation

→Layout

→Paint

⚠️ BottleneckReconciliation and Paint stages due to large component re-renders

Core Web Vital Affected

INP

This affects the rendering speed and responsiveness by controlling how React updates and re-renders components.

Optimization Tips

1Split UI into small, focused components to limit re-render scope.

2Keep static UI separate from dynamic parts to avoid unnecessary updates.

3Use React DevTools Profiler to find and fix excessive re-renders.

Performance Quiz - 3 Questions

Why is splitting UI into smaller components better for React performance?

A It limits re-rendering to only components that need updating

B It increases the number of DOM nodes, making updates faster

C It forces React to re-render the entire app every time

D It reduces the bundle size significantly

DevTools: React DevTools and Chrome Performance panel

How to check: Use React DevTools Profiler to record interactions and see which components re-render. Use Chrome Performance to check paint and layout times.

What to look for: Look for minimal component re-renders on state changes and low paint/layout times indicating efficient updates.