How can I use React hooks to manage async data?

How can I use React hooks to manage async data?

You can use the useEffect hook to fetch data asynchronously and useState to manage the data state.

Can you show me a code example?

Sure! 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 fetches data when the component mounts.

What if I want to handle errors during the fetch?

You can add a state for errors and update it in the catch block of your fetch function. Here's an updated example:

const [error, setError] = useState(null);

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) {
        setError(error.message);
    } finally {
        setLoading(false);
    }
};

This way, you can display the error message if something goes wrong.