Using error boundaries in React - Performance & Optimization

Performance: Using error boundaries

MEDIUM IMPACT

Error boundaries affect the user experience during runtime errors by preventing full app crashes and controlling UI fallback rendering.

Handling runtime errors in React components to avoid app crashes

React

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  render() {
    if (this.state.hasError) return <FallbackUI />;
    return this.props.children;
  }
}

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

Only the error boundary subtree re-renders fallback UI, preserving the rest of the app and improving responsiveness.

📈 Performance GainLimits re-render scope to error boundary subtree, reducing reflows and improving INP.

Handling runtime errors in React components to avoid app crashes

React

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

// No error boundary used

If ComponentThatMayThrow throws an error, the entire React tree unmounts causing a blank screen.

📉 Performance CostTriggers full React tree unmount and remount on error, causing slow recovery and poor INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No error boundary	Full React tree unmount and remount	Multiple reflows for entire app	High paint cost due to full UI redraw	[X] Bad
Error boundary used	Only error subtree re-renders	Single reflow limited to subtree	Lower paint cost with partial UI update	[OK] Good

Rendering Pipeline

When an error occurs, React triggers the error boundary lifecycle methods, causing a controlled re-render of only the affected subtree with fallback UI.

→JavaScript Execution

→React Reconciliation

→Layout

→Paint

⚠️ BottleneckReact Reconciliation and subsequent Layout due to subtree re-render

Core Web Vital Affected

INP

Error boundaries affect the user experience during runtime errors by preventing full app crashes and controlling UI fallback rendering.

Optimization Tips

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

2Limit re-render scope to error subtree to reduce layout thrashing.

3Test error boundaries with React DevTools to ensure minimal UI disruption.

Performance Quiz - 3 Questions

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

A They prevent any JavaScript execution during errors.

B They limit UI re-rendering to only the error subtree, improving interaction responsiveness.

C They reduce the initial bundle size of the app.

D They eliminate all layout shifts caused by dynamic content.

DevTools: React DevTools and Performance panel

How to check: Use React DevTools to inspect component tree during error; use Performance panel to record and analyze re-render scope and duration.

What to look for: Look for limited re-rendering in React tree and shorter interaction delays indicating better INP.