How do I create error boundaries in React?

How do I create error boundaries in React?

To create error boundaries in React, you can use the componentDidCatch lifecycle method and the static getDerivedStateFromError method.

Can you show me a code example?

Sure! Here's a simple example:

class ErrorBoundary extends React.Component {
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error('Error caught in ErrorBoundary:', error, info);
  }

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

How do I use this ErrorBoundary in my app?

You can wrap your components with the ErrorBoundary like this:

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

What happens if an error occurs in MyComponent?

If an error occurs in MyComponent, the ErrorBoundary will catch it and display the fallback UI you defined.