How can I fetch data in React 18?

How can I fetch data in React 18?

In React 18, you can use the built-in useEffect hook along with fetch or libraries like Axios to retrieve data.

Can you show me a code example?

Sure! Here's a simple example:

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

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

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

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

This fetches data from an API and displays it.

What about error handling?

You can add error handling by using a try-catch block or checking the response status. Here's an updated example:

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 data = await response.json();
            setData(data);
        } catch (error) {
            console.error('Fetch error:', error);
        } finally {
            setLoading(false);
        }
    };
    fetchData();
}, []);

Thanks! This is really helpful.