React Error Boundaries in Functional Components

I was working on a React project for a US-based client, and I ran into a situation where one faulty component crashed the entire app.

The problem was clear—React needed an error boundary. But error boundaries were originally designed for class components, and I mostly use functional components.

After a bit of research and trial-and-error, I found a couple of reliable ways to handle this. In this tutorial, I’ll show you exactly how to use error boundaries in functional components, with full code examples.

Table of Contents

What is an Error Boundary?

In simple words, an error boundary is a React component that catches JavaScript errors in its child component tree and displays a fallback UI instead of crashing the whole app.

Think of it as a safety net. If one piece of your UI fails, the rest of the app still works.

Method 1 – Use a Class Component as an Error Boundary

Even if you prefer functional components, the simplest way to start is by creating a small class-based error boundary and wrapping it around your functional components.

import React from "react";

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

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

  componentDidCatch(error, errorInfo) {
    console.error("Error caught by boundary:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h2>Something went wrong. Please try again.</h2>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

This class component catches errors in its children and shows a fallback message instead of breaking the app. You can wrap any functional component inside this boundary.

Example usage:

import React from "react";
import ErrorBoundary from "./ErrorBoundary";

function ProblematicComponent() {
  throw new Error("Unexpected issue!");
}

function App() {
  return (
    <ErrorBoundary>
      <ProblematicComponent />
    </ErrorBoundary>
  );
}

export default App;

You can refer to the screenshot below to see the output.

React Error Boundaries in Functional Components

Here, the ProblematicComponent throws an error, but instead of crashing the app, the error boundary displays the fallback message.

Method 2 – Use the react-error-boundary Library

If you prefer staying inside the functional component world, the react-error-boundary library is a great solution. It’s lightweight, modern, and works perfectly with hooks.

Install it first:

npm install react-error-boundary

Now use it like this:

import React from "react";
import { ErrorBoundary } from "react-error-boundary";

function FallbackComponent({ error, resetErrorBoundary }) {
  return (
    <div>
      <p>Oops! Something went wrong: {error.message}</p>
      <button onClick={resetErrorBoundary}>Try Again</button>
    </div>
  );
}

function ProblematicComponent() {
  throw new Error("API request failed!");
}

function App() {
  return (
    <ErrorBoundary
      FallbackComponent={FallbackComponent}
      onReset={() => console.log("Reset triggered")}
    >
      <ProblematicComponent />
    </ErrorBoundary>
  );
}

export default App;

You can refer to the screenshot below to see the output.

Error Boundaries in Functional Components React

The FallbackComponent gives users a friendly error message and a retry option. The onReset callback lets you recover gracefully, such as by retrying an API call.

Method 3 – Use the New useErrorBoundary Hook (React 19)

With React 19, error handling in functional components is even easier, thanks to the new useErrorBoundary hook.

Here’s how it works:

import React from "react";
import { useErrorBoundary } from "react-error-boundary";

function ChildComponent() {
  throw new Error("Data fetch failed!");
}

function App() {
  const { ErrorBoundary, resetBoundary } = useErrorBoundary();

  return (
    <ErrorBoundary
      fallbackRender={({ error }) => (
        <div>
          <p>Error: {error.message}</p>
          <button onClick={resetBoundary}>Retry</button>
        </div>
      )}
    >
      <ChildComponent />
    </ErrorBoundary>
  );
}

export default App;

You can refer to the screenshot below to see the output.

Error Boundaries in React Functional Components

The useErrorBoundary hook provides a declarative way to handle errors in functional components, with built-in reset and recovery options.

When Should You Use Error Boundaries?

From my experience, error boundaries are most useful in:

Components that fetch data from APIs (like US weather or stock data).
Third-party widgets that might fail unexpectedly.
Large dashboards where one broken chart shouldn’t crash the whole page.

While React doesn’t allow functional components to directly implement error boundaries, you have three practical options:

Use a small class-based boundary.
Use the react-error-boundary library.
Use the new useErrorBoundary hook in React 19.

All three methods work, but for most modern apps, I recommend the react-error-boundary library. It’s simple, flexible, and fits naturally with functional components.