older call of function is overwriting the new one due to more execution time in react js

jashandeep singh 0
Viewed 38

I created a function that fetches cart items from the API There are 2 API one is for authenticated users and the other is for non-authenticated users But the execution of the non-authenticated users takes more time to get data that's why it even overwrites the data for the authenticated user

So how can I solve this problem Inside the context

usestate to call the cart function

useEffect(() => {
        console.log("the value of user", userAuthenticated);
        if (userAuthenticated == true) {
            cartdataupdater("useEffect");
        } else {
            cartdataupdater("useEffect withou");
        }
    }, [userAuthenticated]);

cart updater

   const cartdataupdater = (from = "this") => {
        console.log(" worken", userAuthenticated, from);
        var startTime = performance.now();

        if (userAuthenticated == true) {
            axios.get(`http://127.0.0.1:8000/core/cart/1/`).then((response) => {
                setcartData(response.data);
                console.log("the end is not good");
                var endTime = performance.now();
                console.log(
                    `Call to doSomething took ${
                        endTime - startTime
                    } milliseconds`
                );
            });
        } else {
            console.log("not authenticated");
            var startTime = performance.now();

            axios
                .get(
                    `http://127.0.0.1:8000/core/dcart/${localStorage.getItem(
                        "cart_id"
                    )}`
                )
                .then((response) => {
                    setcartData(response.data);
                    console.log("the end");
                    console.log(from);
                    var endTime = performance.now();
                    console.log(
                        `Call to doSomething took ${
                            endTime - startTime
                        } milliseconds`
                    );
                });
        }
    };

Thanks in advance I anything is required I will provide you

react-context next.js reactjs javascript
1 Answers

I founded the soltion I solve it by adding the loading state which helps me to stop the extra request

const cartdataupdater = () => {
    if (userAuthenticated == true) {
        axios.get(`http://127.0.0.1:8000/core/cart/1/`).then((response) => {
            setcartData(response.data);
        });
    } else {
        try {
            axios
                .get(
                    `http://127.0.0.1:8000/core/dcart/${localStorage.getItem(
                        "cart_id"
                    )}`
                )
                .then((response) => {
                    setcartData(response.data);
                });
        } catch (error) {
            console.log(error);
        }
    }
};

useEffect(() => {
    if (userauthloading == false) {
        cartdataupdater();
    }
}, [userauthloading, userAuthenticated]);
jashandeep singh0
Related