How can I make use of Error boundaries in functional React components?

How can I make use of Error boundaries in functional React components?

React is a popular JavaScript library for building user interfaces. With the introduction of React 16, error boundaries were introduced as a way to handle errors in React components. Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of crashing the whole application.

In this article, we will explore how to make use of error boundaries in functional React components.

1. Using the ErrorBoundary component provided by React

React provides an ErrorBoundary component that you can use to wrap around your functional components. This component will catch any errors thrown by its child components and allow you to handle them gracefully.

Here’s an example of how to use the ErrorBoundary component:

import React, { useState } from 'react';

const ErrorBoundary = ({ children }) => {
  const [error, setError] = useState(null);

  if (error) {
    return <div>Something went wrong: {error.message}</div>;
  }

  return children;
};

const MyComponent = () => {
  throw new Error('Oops! Something went wrong.');

  return <div>My Component</div>;
};

const App = () => {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
};

export default App;

In this example, the ErrorBoundary component wraps around the MyComponent component. If an error is thrown inside MyComponent, it will be caught by the ErrorBoundary and the fallback UI will be displayed.

2. Creating a custom error boundary component

If you want more control over the error handling process, you can create your own custom error boundary component. This allows you to define how the error is handled and what UI should be displayed.

Here’s an example of how to create a custom error boundary component:

import React, { useState } from 'react';

const CustomErrorBoundary = ({ children }) => {
  const [error, setError] = useState(null);

  const handleError = (error) => {
    // Handle the error here
    setError(error);
  };

  if (error) {
    return <div>Something went wrong: {error.message}</div>;
  }

  return children;
};

const MyComponent = () => {
  throw new Error('Oops! Something went wrong.');

  return <div>My Component</div>;
};

const App = () => {
  return (
    <CustomErrorBoundary>
      <MyComponent />
    </CustomErrorBoundary>
  );
};

export default App;

In this example, the CustomErrorBoundary component wraps around the MyComponent component. If an error is thrown inside MyComponent, it will be caught by the CustomErrorBoundary and the handleError function will be called to handle the error.

By creating a custom error boundary component, you have the flexibility to define your own error handling logic and UI.

Now that you know how to make use of error boundaries in functional React components, you can use them to handle errors gracefully and provide a better user experience in your React applications.

Remember to always wrap your components with error boundaries to ensure that any errors are caught and handled properly.

Happy coding!