Error boundaries concept in React - Performance & Optimization

Performance: Error boundaries concept

MEDIUM IMPACT

Error boundaries affect the user experience by preventing the entire React app from crashing when a component error occurs, improving interaction responsiveness.

Handling runtime errors in React components to avoid app crash

React

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  render() {
    if (this.state.hasError) {
      return <div>Something went wrong.</div>;
    }
    return this.props.children;
  }
}

function BuggyComponent() {
  throw new Error('Crash!');
}

function App() {
  return (
    <ErrorBoundary>
      <BuggyComponent />
    </ErrorBoundary>
  );
}

Error boundary catches errors in child components, preventing full app crash and allowing fallback UI, improving interaction responsiveness.

📈 Performance GainAvoids full re-render crash; maintains INP by isolating error handling.

Handling runtime errors in React components to avoid app crash

React

function BuggyComponent() {
  throw new Error('Crash!');
  return <div>Won't render</div>;
}

function App() {
  return <BuggyComponent />;
}

No error boundary means the entire React component tree crashes on error, causing a blank screen and poor user experience.

📉 Performance CostBlocks rendering completely until reload; causes poor INP and user frustration.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No error boundary	Full tree unmount and remount on error	Multiple reflows due to full app reload	High paint cost due to blank screen and reload	[X] Bad
With error boundary	Only error boundary subtree replaced	Single reflow limited to fallback UI	Low paint cost with stable UI fallback	[OK] Good

Rendering Pipeline

When an error occurs in a React component, error boundaries catch it during rendering or lifecycle methods, preventing React from unmounting the entire tree. This avoids costly full reflows and repaints caused by app crashes.

→JavaScript Execution

→React Reconciliation

→Paint

→Composite

⚠️ BottleneckJavaScript Execution when error is uncaught causes full app unmount and reload.

Core Web Vital Affected

INP

Error boundaries affect the user experience by preventing the entire React app from crashing when a component error occurs, improving interaction responsiveness.

Optimization Tips

1Use error boundaries to isolate component errors and avoid full app crashes.

2Error boundaries improve interaction responsiveness by rendering fallback UI quickly.

3Without error boundaries, errors cause full React tree unmount and blank screens.

Performance Quiz - 3 Questions

What is the main performance benefit of using error boundaries in React?

A They speed up CSS rendering by isolating styles.

B They reduce the initial bundle size by lazy loading components.

C They prevent the entire app from crashing on component errors, improving input responsiveness.

D They improve network loading times by caching API calls.

DevTools: React DevTools and Chrome Performance panel

How to check: Use React DevTools to inspect component tree and verify error boundary presence. Use Performance panel to record interaction and check if full app reload occurs on error.

What to look for: Look for stable component tree with fallback UI instead of full unmount. Performance trace should show no full page reload or long scripting blocking.