How to handle errors in React?

Handling errors in React is crucial for creating robust and user-friendly applications. React provides several mechanisms to manage errors effectively. Here are some common approaches:

Approach 1: Error Boundaries:

Error boundaries are a feature in React that allows components to catch JavaScript errors anywhere in their component tree and log those errors, display a fallback UI, or take other actions. To create an error boundary, a component needs to define static getDerivedStateFromError and componentDidCatch lifecycle methods.

Syntax:

<ErrorBoundary>
    <MyComponent />
</ErrorBoundary>

Approach 2: try-catch in Event Handlers:

When dealing with asynchronous operations, such as fetching data or handling events, you can use the standard JavaScript try-catch block to catch errors and handle them gracefully.

Syntax:

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        // Process data
    } catch (error) {
        console.error('Error fetching data:', error);
        // Handle the error
    }
}