How can I implement error boundaries in functional components using React?

How can I implement error boundaries in functional components using React?

In React, you can use the ErrorBoundary class component to catch errors in its child components. However, for functional components, you can use hooks like useErrorHandler from the react-error-boundary library.

Can you show me a code example of how to use it?

Sure! Here's a simple example:

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

const ErrorFallback = ({ error }) => <div>Error: {error.message}</div>;

const MyComponent = () => {
  // Your component logic here
};

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

export default App;

What happens if an error occurs in MyComponent?

If an error occurs in MyComponent, the ErrorBoundary will catch it and render the ErrorFallback component, displaying the error message.