Error Boundaries in React
From the React Components & JSX cheat sheet · Optimization & Advanced Features · verified Jul 2026
Error Boundaries
Catch render errors in child components and show fallback UI
jsx
class ErrorBoundary extends Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, info) {
console.error(error, info);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}💡 Error boundaries must be class components — there is no hook equivalent (yet)
⚡ Use react-error-boundary library for a cleaner functional API
📌 Wrap risky subtrees independently so one error doesn't take down the whole app
🟢 Error boundaries do NOT catch async errors or event handler errors — use try/catch there
error-boundaryerrorclass