How do I handle loading states in a React application?

How do I handle loading states in a React application?

You can manage loading states in React by using the useState hook to track loading status and conditionally render components.

Can you show me a code example?

Sure! Here's a simple example:

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

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

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
    setLoading(false);
  };

  if (loading) return <div>Loading...</div>;
  return <div>Data: {JSON.stringify(data)}</div>;
};

This code fetches data and shows a loading message while waiting.

What if I want to show an error message?

You can add another state for error handling. Here's an updated example:

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

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      if (!response.ok) throw new Error('Network response was not ok');
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  return <div>Data: {JSON.stringify(data)}</div>;
};

Thanks! This is really helpful.