How can I create a custom fetch hook in React?

How can I create a custom fetch hook in React?

You can create a custom fetch hook by using the useEffect and useState hooks to manage data fetching.

Can you show me a simple example?

Sure! Here's a basic example:

import { useState, useEffect } from 'react';

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);
            } finally {
                setLoading(false);
            }
        };
        fetchData();
    }, [url]);

    return { data, loading, error };
};

This hook takes a URL and returns the fetched data, loading state, and any errors.

What if I want to add a dependency to the fetch?

You can add dependencies to the useEffect array. The fetch will re-run whenever those dependencies change.