What is a component in React - Performance Impact

Performance: What is a component

MEDIUM IMPACT

This concept affects how quickly the page can render and update UI elements by managing reusable pieces of the interface.

Building UI with reusable pieces

React

function Title() { return <h1>Title</h1>; }
function Description() { return <p>Description</p>; }
function ClickButton() { return <button>Click me</button>; }
function App() {
  return (
    <div>
      <Title />
      <Description />
      <ClickButton />
    </div>
  );
}

Splitting UI into small components limits re-render scope and improves interaction speed.

📈 Performance GainOnly affected components re-render, reducing unnecessary work and improving INP.

Building UI with reusable pieces

React

function App() {
  return (
    <div>
      <h1>Title</h1>
      <p>Description</p>
      <button>Click me</button>
    </div>
  );
}

All UI elements are in one big component causing large re-renders and slower updates.

📉 Performance CostTriggers full component re-render on any state change, increasing INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Single large component	Many DOM nodes updated at once	Multiple reflows per update	High paint cost due to full re-render	[X] Bad
Multiple small components	Only changed components update DOM nodes	Minimal reflows limited to changed parts	Lower paint cost due to partial updates	[OK] Good

Rendering Pipeline

React components are parsed, their JSX converted to virtual DOM, then React compares changes and updates the real DOM efficiently.

→Virtual DOM Diffing

→DOM Updates

→Paint

→Composite

⚠️ BottleneckDOM Updates stage is most expensive when many components re-render unnecessarily.

Core Web Vital Affected

INP

This concept affects how quickly the page can render and update UI elements by managing reusable pieces of the interface.

Optimization Tips

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

2Avoid putting too much UI in one component to prevent large re-renders.

3Use React memoization techniques to prevent unnecessary updates.

Performance Quiz - 3 Questions

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

A It bundles all code into one file, reducing network requests.

B It limits re-rendering to only changed components, improving responsiveness.

C It increases the number of DOM nodes, making rendering slower.

D It disables React's virtual DOM, speeding up updates.

DevTools: React DevTools and Performance panel

How to check: Use React DevTools to inspect component tree and see which components re-render on interaction. Use Performance panel to record and analyze rendering times.

What to look for: Look for unnecessary re-renders of large components and long scripting times that delay input responsiveness.