mediumFrontend

What are Error Boundaries in React?

Q: What are Error Boundaries in React?

**Core concept (TL;DR).** An Error Boundary is a **class component** that **catches JavaScript errors in its child tree** during rendering, lifecycle methods, and constructors — then renders a **fallback UI** instead of letting the whole app crash (an unmounted white screen). It implements getDerivedStateFromError and/or componentDidCatch . Catch render errors, show a fallback <Err

267 views

Understand the problem

Describe what Error Boundaries are, how they work, and their utility in React applications.

error handlingerror boundariesuxlifecycle

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

A reusable Error Boundary

import { Component } from "react";

class ErrorBoundary extends Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; } // show fallback
  componentDidCatch(error, info) { /* log to Sentry, etc. */ }
  render() {
    if (this.state.hasError) return <p>⚠️ Something went wrong.</p>;
    return this.props.children;
  }
}

function Broken() { throw new Error("render crash"); }

export default function App() {
  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <p>App still runs ↓</p>
      <ErrorBoundary><Broken /></ErrorBoundary>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

Explain the purpose of `useEffect`.

How do you optimize performance in a React application?