Use a fallback UI to handle errors gracefully.?

Short answer: Example: class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; // Update state to trigger a fallback UI } componentDidCatch(error, info) { console.error("Error caught by Error Boundary:", error, info); } render() { if (this.state.hasError) { return <h1>Something went wrong!</h1>; }…

Explain a bit more

return this.props.children; } } export default ErrorBoundary; You can wrap parts of your app in this ErrorBoundary to gracefully handle errors.

Example code

Example: class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false };
} static getDerivedStateFromError(error) { return { hasError: true }; // Update state to trigger a fallback UI } componentDidCatch(error, info) { console.error("Error caught by Error Boundary:", error, info); } render() { if (this.state.hasError) {
return <h1>Something went wrong!</h1>;
}
return this.props.children;
}
} export default ErrorBoundary; You can wrap parts of your app in this ErrorBoundary to gracefully handle errors.

Real-world example (ShopNest)

ShopNest’s storefront is React: components for ProductCard, CartDrawer, and CheckoutForm, with hooks for local UI state.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.