How do I use the fetch hook in React?

How do I use the fetch hook in React?

You can use the useFetch hook to make API calls in your React components. It simplifies data fetching.

Can you show me a basic example of how to implement it?

Sure! Here's a simple example:

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

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

    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch(url);
            const result = await response.json();
            setData(result);
            setLoading(false);
        };
        fetchData();
    }, [url]);

    return { data, loading };
};

const App = () => {
    const { data, loading } = useFetch('https://api.example.com/data');

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

This hook fetches data from the provided URL and returns it along with a loading state.

What if I want to handle errors during the fetch?

You can add an error state to your hook. Here's an updated version:

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

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(url);
                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);
            }
        };
        fetchData();
    }, [url]);

    return { data, loading, error };
};

Now you can check for errors in your component!