Reusable components in React - Performance & Optimization

Performance: Reusable components

MEDIUM IMPACT

Reusable components affect rendering speed and bundle size by reducing duplicated code and minimizing unnecessary DOM updates.

Creating UI elements that appear multiple times with similar structure

React

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

function App() {
  return (
    <>
      <Button label="Click 1" onClick={() => alert('Clicked 1')} />
      <Button label="Click 2" onClick={() => alert('Clicked 2')} />
      <Button label="Click 3" onClick={() => alert('Clicked 3')} />
    </>
  );
}

Reusing the Button component reduces code duplication and allows React to optimize rendering and updates.

📈 Performance GainSmaller bundle size and fewer unnecessary re-renders, improving interaction responsiveness

Creating UI elements that appear multiple times with similar structure

React

function App() {
  return (
    <>
      <button onClick={() => alert('Clicked 1')}>Click 1</button>
      <button onClick={() => alert('Clicked 2')}>Click 2</button>
      <button onClick={() => alert('Clicked 3')}>Click 3</button>
    </>
  );
}

Duplicated button code increases bundle size and makes maintenance harder; React treats each button as a separate element causing more DOM nodes.

📉 Performance CostAdds unnecessary bundle size and triggers multiple reflows if buttons update independently

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Duplicated inline elements	Many unique nodes	Multiple reflows on updates	Higher paint cost due to many nodes	[X] Bad
Reusable components	Fewer unique nodes, reused	Single or fewer reflows	Lower paint cost due to reuse	[OK] Good

Rendering Pipeline

Reusable components reduce the amount of unique code React must process and help React reuse DOM nodes efficiently during reconciliation.

→JavaScript Execution

→Virtual DOM Diffing

→DOM Updates

⚠️ BottleneckExcessive unique elements increase Virtual DOM diffing and DOM updates

Core Web Vital Affected

INP

Reusable components affect rendering speed and bundle size by reducing duplicated code and minimizing unnecessary DOM updates.

Optimization Tips

1Use reusable components to avoid repeating similar JSX code.

2Keep components small and focused to maximize reuse and minimize re-renders.

3Pass only necessary props to reusable components to avoid unnecessary updates.

Performance Quiz - 3 Questions

How do reusable components improve React app performance?

A By increasing the number of DOM nodes to speed up rendering

B By reducing duplicated code and minimizing unnecessary re-renders

C By forcing React to reload the entire page on each update

D By disabling React's virtual DOM diffing

DevTools: React DevTools and Chrome Performance

How to check: Use React DevTools to inspect component tree and check for repeated code. Use Performance panel to record interactions and see re-render counts.

What to look for: Look for repeated components in the tree and excessive re-renders causing long scripting times or layout shifts.