How can I manage loading states in a React app using Axios?

How can I manage loading states in a React app using Axios?

You can manage loading states by using a state variable to track the loading status. When you make an Axios request, set the loading state to true, and once the request is complete, set it back to false.

Can you show me a code example?

Sure! Here's a simple example:

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

const MyComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
};

This code sets a loading state while fetching data.

What if I want to handle errors as well?

You can add an error state to manage errors. Update the code to include an error state and display an error message if the request fails.