Error handling and loading states

When building web applications that interact with APIs, it’s important to handle errors and loading states appropriately. In this article, we’ll explore how to handle errors and loading states in a React component.

Error Handling

When interacting with APIs, there are several types of errors that can occur, such as network errors or errors returned by the API itself. To handle these errors in a React component, we can use a combination of error states and conditional rendering.

Here’s an example of how to handle errors in a React component:

jsx

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => setData(data))
      .catch(error => setError(error));
  }, []);

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

In this example, we’re using the useState hook to create an error state variable that’s initialized to null. We’re then using the useEffect hook to retrieve data from an API and set the data state variable. If there’s an error, we’re setting the error state variable to the error object.

Finally, we’re using conditional rendering to display an error message if the error state variable is not null.

Loading States

When retrieving data from an API, there can be a delay while waiting for the response. To improve the user experience, we can show a loading state while waiting for the response.

Here’s an example of how to implement a loading state in a React component:

jsx

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        setError(error);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

In this example, we’re using the useState hook to create a loading state variable that’s initialized to true. We’re then setting the loading state variable to false when we’ve retrieved data from the API or encountered an error.

Finally, we’re using conditional rendering to display a loading message if the loading state variable is true.

Conclusion

Handling errors and loading states is an important part of building web applications that interact with APIs. By using a combination of error states, conditional rendering, and loading states, we can provide a better user experience and improve the reliability of our applications.