15. Error boundaries, portals, Suspense and lazy loading

// Error boundary (still a class component, or use the react-error-boundary package)
class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  componentDidCatch(error, info) { logToServer(error, info.componentStack); }
  render() { return this.state.hasError ? <p>Something went wrong.</p> : this.props.children; }
}

// Code splitting
const Reports = lazy(() => import("./Reports"));
<Suspense fallback={<Spinner />}><Reports /></Suspense>

// Portal: render outside the parent DOM (modals, tooltips)
createPortal(<Modal />, document.getElementById("modal-root"));