How do I manage asynchronous state in React?

How do I manage asynchronous state in React?

You can manage asynchronous state in React using hooks like useState and useEffect. Would you like an example?

Yes, please provide an example of fetching data.

Sure! You can use useEffect to fetch data when the component mounts. Here's a simple example:

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

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

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

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

This will fetch data when the component mounts.

What if I need to handle errors during the fetch?

You can add a try-catch block inside your fetch function to handle errors. Here's how:

useEffect(() => {
  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 (error) {
      console.error('Fetch error:', error);
    } finally {
      setLoading(false);
    }
  };
  fetchData();
}, []);