Custom Hook to get Data from Api and Show Response in React

gistfile1.txt

import { useState } from "react";

function useData(url) {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    const [localData, setLocalData] = useState(
        JSON.parse(localStorage.getItem("data")) || []
    );

    if (!url) return;
    const callApi = async () => {
        try {
            setLoading(true);
            const req = await fetch(url);
            const data = await req.json();
            if (!req.ok) {
                setError("Something went wrong");
                setLoading(false);
                return;
            }
            setData(data);
            setLocalData(data);
            localStorage.setItem("data", JSON.stringify(data));
            setLoading(false);
        } catch (err) {
            setError(err);
            setLoading(false);
        }
    }

    const removeData = () => {
        setData([]);
        localStorage.removeItem("data");
        setLocalData([]);
        setError(null);
    }

    return { data, loading, error, callApi, localData, removeData };

}

get Data from endpoint set it to local storage and other attributes you can use it in app