Basically, there is a function that receives the updated state of the value being controlled on the screen by the user (it is a useState). This function is used throughout the component to handle quantity state updates. In order for this state to be updated automatically when the user exceeds the quantity returned in the context, related to the availability of the item, it is passed inside a useEffect.

The problem is that the item availability query seems to be slower than the user click. Note that for the user to exceed the limit quantity (based on the availability of the item) he has to click faster.

It's important to mention that it's a frontend issue and it does not let the user insert more items in the cart than the available limit.

Evidence: https://youtu.be/AJbtF4qeJ5k

If the limit quantity is 3 when I go over to 4 the status is updated based on availability and the quantity returns to 3. The user can only go over to 5 if he clicks the increment button faster than the availability query time of the item + the component state update to 3. As the click is faster, the variable that contains the value remains with the same value. In this example, 5.

N/A