Reusable UI components in React - Performance & Optimization

Performance: Reusable UI components

MEDIUM IMPACT

Reusable UI components affect rendering speed and bundle size by controlling how often components re-render and how much code is reused.

Creating a button component used multiple times with different labels

React

const handleSave = () => save();
const handleCancel = () => cancel();

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

function App() {
  return (
    <>
      <Button label="Save" onClick={handleSave} />
      <Button label="Cancel" onClick={handleCancel} />
    </>
  );
}

Passing stable function references avoids unnecessary re-renders and reduces layout recalculations.

📈 Performance GainReduces re-renders to only when props actually change

Creating a button component used multiple times with different labels

React

function Button(props) {
  return <button>{props.label}</button>;
}

// Used inline with anonymous functions causing re-renders
function App() {
  return (
    <>
      <Button label="Save" onClick={() => save()} />
      <Button label="Cancel" onClick={() => cancel()} />
    </>
  );
}

Inline anonymous functions cause new function instances on every render, triggering unnecessary re-renders of Button components.

📉 Performance CostTriggers multiple re-renders and layout recalculations on each parent render

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Inline anonymous functions in props	High (new functions cause re-renders)	Multiple per parent render	High due to repeated layout	[X] Bad
Stable function references with memoized components	Low (re-renders only on prop change)	Single or minimal	Low due to fewer layout recalculations	[OK] Good

Rendering Pipeline

Reusable components affect the rendering pipeline by controlling how often React reconciles and updates the DOM nodes, impacting style calculation, layout, and paint.

→Reconciliation

→Layout

→Paint

⚠️ BottleneckReconciliation stage is most expensive when components re-render unnecessarily.

Core Web Vital Affected

INP

Reusable UI components affect rendering speed and bundle size by controlling how often components re-render and how much code is reused.

Optimization Tips

1Avoid inline functions in props to prevent unnecessary re-renders.

2Use React.memo to memoize components that receive stable props.

3Keep component props stable and simple to maximize memoization benefits.

Performance Quiz - 3 Questions

What is a common cause of unnecessary re-renders in reusable React components?

A Using React.memo to wrap components

B Using keys on list items

C Passing inline anonymous functions as props

D Splitting components into smaller pieces

DevTools: React DevTools Profiler

How to check: Record a profiling session while interacting with the UI, then inspect component render counts and durations.

What to look for: Look for components that re-render frequently without prop changes indicating unnecessary work.