Avoid duplication in fetch call

Question

I'm trying to avoid duplication of data using fetch.

The fetch call looks like this:

    const [data, setData] = useState(null);

    useEffect(() => {
        const promises = urls.map((url) =>
            fetch(baseUrl + url).then((response) => {
                if (response.ok) return response.json();
                throw response
            })
        );
        Promise.all(promises)
            .then((json) => setData(json))
    }, []);

    return { data}
};

export default useFetchAll;

How can the fetch call be modified to avoid duplication ?

Thank you!

Answer 1

Look into SWR or React Query. Both of those libraries will give you a ton of features, including caching data.