Handling runtime errors in React - Performance & Optimization

Performance: Handling runtime errors

MEDIUM IMPACT

This affects user experience responsiveness and visual stability by preventing crashes and layout shifts caused by unhandled errors.

Displaying UI without crashing when a runtime error occurs

React

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // log the error
  }

  render() {
    if (this.state.hasError) {
      return <div role="alert">Something went wrong.</div>;
    }
    return this.props.children;
  }
}

function RiskyChild() {
  const data = JSON.parse('invalid json');
  return <div>{data.name}</div>;
}

function MyComponent() {
  return (
    <ErrorBoundary>
      <RiskyChild />
    </ErrorBoundary>
  );
}

Catches errors before they crash the UI, rendering fallback content and preventing layout shifts.

📈 Performance GainAvoids re-render blocking and CLS; improves INP by keeping UI responsive.

Displaying UI without crashing when a runtime error occurs

React

function MyComponent() {
  const data = JSON.parse('invalid json');
  return <div>{data.name}</div>;
}

No error handling causes the entire component to crash, breaking the UI and causing layout shifts.

📉 Performance CostBlocks rendering until error occurs; causes CLS due to sudden UI disappearance.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No error handling	Component unmounts abruptly	Multiple reflows due to layout shifts	High paint cost from UI flicker	[X] Bad
Error boundary with fallback UI	Stable DOM with fallback nodes	Single reflow for fallback render	Low paint cost, smooth UI	[OK] Good

Rendering Pipeline

Runtime errors interrupt the rendering pipeline causing React to unmount components abruptly, triggering layout shifts and blocking interaction until recovery.

→JavaScript Execution

→Layout

→Paint

→Composite

⚠️ BottleneckJavaScript Execution when errors are unhandled

Core Web Vital Affected

INP, CLS

This affects user experience responsiveness and visual stability by preventing crashes and layout shifts caused by unhandled errors.

Optimization Tips

1Always use error boundaries to catch runtime errors in React components.

2Render fallback UI to avoid layout shifts and keep the interface stable.

3Avoid letting errors crash the entire component tree to maintain responsiveness.

Performance Quiz - 3 Questions

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

A They prevent the entire UI from crashing and reduce layout shifts.

B They increase bundle size but improve loading speed.

C They delay JavaScript execution to improve paint time.

D They eliminate all runtime errors automatically.

DevTools: Performance

How to check: Record a session while triggering an error in the app. Look for long tasks or sudden drops in frame rate.

What to look for: Check for layout shifts in the Experience section and JavaScript errors in the console that cause UI crashes.