What are error boundaries, and how do they work?

Error Boundaries are special components that catch JavaScript errors in their child components.

⚙️ Example

class ErrorBoundary extends React.Component {
  state = { hasError: false };

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

  componentDidCatch(error, info) {
    console.log(error, info);
  }

  render() {
    return this.state.hasError ? (
      <h2>Something went wrong.</h2>
    ) : (
      this.props.children
    );
  }
}

✅ Use them around risky components like lazy-loaded or API-heavy ones.