unable to abort api call

javascript #react #dev #discussion #beginner #expert

i am new to react i wanna avoid api call twice so i used abortcontroller but the prb is that api is still calling twice

export const getBookList = async (callBack) => {
    const controller = new AbortController();
    callBack(controller);

    try {
        const response = await axios.get(
            "https://api.nytimes.com/svc/books/v3/lists/full-overview.json",
            {
                params: {
                    "api-key": "wzJhZX08fB0StJslRDz1nkcIgRG3qgQo",
                },
                signal: controller.signal,
            }
        );
        return response.data;
    } catch (error) {
        console.error("API Error:", error.message);
        throw error;
    }
};

const Home = () => {
    const [data, setData] = useState();
    const [activeFilter, setActiveFilter] = useState();
    const [errorMessage, setErrorMessage] = useState(false);
    const [isLoading, setIsLoading] = useState(false);

    const activeFilterHandler = (item) => setActiveFilter(item?.list_name);

    const fetchList = async () => {
        let abortController;
        try {
            setIsLoading(true);
            const results = await getBookList((abort) => {
                console.log("abort in callback", abort);
                abortController = abort;
            });

            if (results?.status !== "OK") return;
            setData(results?.results);
            setActiveFilter(results?.results.lists[0]?.list_name);
        } catch (error) {
            if (!axios.isCancel(error)) {
                setErrorMessage(true);
                console.error("Component Error:", error.message);
            }
        } finally {
            setIsLoading(false);
        }
        return abortController;
    };

    useEffect(() => {
        let controller;
        fetchList().then((ctrl) => {
            controller = ctrl;

        });

        return () => controller?.abort();
    }, []);