Managing Cart Updates with React and Debouncing

Question

I'm currently working on an e-commerce application using React, and I'm having issues managing cart updates when users add or subtract the quantity of items in their cart.

At the moment, I'm sending update requests to the server every time a user clicks the "Add" or "Subtract" button for an item. This results in a high number of server requests and puts a strain on the application.

I want to implement debouncing so that updates are only sent to the server after the user has finished adding or subtracting items in their cart.

Here are a few steps I've tried:

I've created a state variable called "changes" to track the user-made changes.

I've used the debounce function to delay the call to the cart update function.

However, I'm currently struggling to merge the existing changes in the "changes" variable into a single update sent to the server after the user is finished.

How should I proceed with this debouncing implementation? Are there any missing steps or mistakes that I'm making?

Thank you for your assistance!

this is code by me

const handleChangeQty = async (item, type, index) => {

let qty = item.quantity + 1;
if (type == "dec") {
  qty = item.quantity - 1;
}
let localListCart = newListCart;
if (qty > 0) {
  localListCart.data[index].quantity = qty;
  localListCart.data[index].total_price =
    localListCart.data[index].price * localListCart.data[index].quantity;
} else {
  let newData = localListCart.data.filter((its) => its.code != item.code);
  localListCart.data = newData;
}

let newTotal = 0;
localListCart.data.forEach((element) => {
  newTotal += element.total_price;
});
localListCart.total = newTotal;

setNewListCart({ ...newListCart, localListCart });

const payload = {
  code: item.code,
  quantity: qty,
};

debouncedUpdateCart(payload);

};

const debouncedUpdateCart = debounce(async (payload) => {
if (authenticated) {
  await updateCart(payload).then((res) => {
    dispatch(getCartCount());
    dispatch(getCart(false));
  });
} else {
  await updateCartLocal(payload);
  await dispatch(getCartNotMember(false));
}
}, 1000);

Btw, I use lodash for debouncing.

Answer 1

The best way for you to implement is to handle the count and add cart functionality differently. Simply store the local count in a state variable and once the user clicks on add to cart, make an api call with the relevant payload. Calling an api on every addition or subtraction would still cause an impact even with debounce.