iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Can you write a React error boundary as a function component? Not with React’s built-in boundary APIs: getDerivedStateFromError and componentDidCatch are class lifecycle methods. Use a small class boundary—or React’s suggested react-error-boundary package—around your function components. Hooks do not replace those APIs.
Build a class boundary around function components
The boundary itself must use a class, but its children and fallback can be ordinary function components using hooks. This keeps the boundary implementation small while letting the rest of the application follow a function-component style.
import React from 'react';
export class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() {
// Update state so the next render shows the fallback.
return { hasError: true };
}
componentDidCatch(error, info) {
// Send details to your application's reporting system.
logError(error, info.componentStack);
}
render() {
if (this.state.hasError) {
return this.props.fallback ?? <p>This section could not be loaded.</p>;
}
return this.props.children;
}
}
function ProductPanel() {
return <section>Product details</section>;
}
function App() {
return (
<ErrorBoundary fallback={<p>Product details are unavailable.</p>}>
<ProductPanel />
</ErrorBoundary>
);
}getDerivedStateFromError is the render-state step: keep it pure and return the state needed to select fallback UI. Use componentDidCatch(error, info) for side effects such as logging; info.componentStack identifies the component stack where the error occurred. React notes that a thrown value is not guaranteed to be an Error instance, so reporting code should tolerate values without the usual Error properties. See the React Component reference.
Do not use setState in componentDidCatch to choose the fallback. React marks that older pattern deprecated in favor of static getDerivedStateFromError.
#1 Best Overall
Choose between a reusable class and a package
| Path | What it gives you | What you own or should check |
|---|---|---|
| Reusable class boundary | React’s documented boundary lifecycle APIs and direct control of fallback rendering. | Your team implements the fallback, any reset or recovery behavior, and error reporting. |
react-error-boundary |
A package React names as an alternative if you do not want to write the class yourself. | Check whether its API suits your fallback and recovery needs, and whether it fits your project’s dependency policy. The cited React documentation does not establish the package’s current version, maintenance status, or license. |
Neither choice makes the boundary a function component. The package is a way to use a library-provided boundary rather than authoring the class directly. React does not establish a performance, bundle-size, or commercial comparison between these paths in its cited guidance.
Know which errors a boundary catches
A boundary catches errors thrown by descendant components while React renders them, including errors several levels down the tree. Its scope is not a general-purpose catch for every failure associated with that UI.
- Caught: descendant render errors, and documented errors thrown by a function passed to
startTransition. - Not caught: errors in event handlers, typical asynchronous callbacks such as
setTimeoutorrequestAnimationFrame, server rendering, or errors thrown by the boundary itself. - Special cases: a thrown form action can show the nearest boundary fallback. React documents these cases specifically; they do not mean that all asynchronous failures are caught.
See React’s error-boundary reference, form reference, and useTransition reference for the documented scope and cases.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsWhy a parent try/catch does not work
This does not catch a child’s render-time error:
function Parent() {
try {
return <Child />;
} catch (error) {
return <p>Fallback</p>;
}
}Returning JSX does not synchronously render the child inside the parent’s JavaScript try block; React renders the child as part of its own rendering work. Put an error boundary around the subtree instead. React’s error-boundaries lint guidance explains this limitation and recommends a boundary.
Place boundaries where fallback UI helps recovery
Choose the smallest meaningful part of the interface that can fail independently and still leave the rest useful. A boundary around a page region can preserve the surrounding navigation and content if that region breaks. For repeated items, a per-item boundary may make sense when one failed item should not take down its siblings. Avoid wrapping every tiny visual component: that creates boundaries without necessarily giving users a useful recovery choice. React’s placement guidance is in the Component reference.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Handle server rendering and React 19 reporting separately
Server rendering uses a distinct Suspense behavior
Error boundaries do not catch server-rendering errors. In streaming server rendering, React documents that if a component throws on the server, the nearest Suspense boundary can render its fallback; the client then retries that component and shows an error-boundary fallback if it also errors on the client. This is a specific Suspense behavior, not a rule that error boundaries handle server failures. See the Suspense reference.
React 19 changed how render errors are reported
React’s React 19 upgrade guide, published April 25, 2024, says uncaught render errors are reported to window.reportError, while errors caught by an error boundary are reported to console.error. For custom telemetry, createRoot and hydrateRoot accept onUncaughtError and onCaughtError callbacks. If your integration depended on errors being re-thrown, verify its behavior with React 19.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The React versions page identified React 19.3 as the latest version when checked on October 7, 2026; version availability can change. Consult the React versions page for the current release.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
