mediumRace ConditionsReact

The double submit

A developer asked an AI assistant to handle a 'Place Order' button click that charges a customer's card and creates an order record. The suggested code works fine for a single click, but customers who double-click the button, or click again while the page is slow to respond, sometimes get charged twice.

PlaceOrderButton.jsx

function PlaceOrderButton({ cart }) {
  const handleClick = async () => {
    await chargeCard(cart.total);
    await createOrder(cart);
  };

  return <button onClick={handleClick}>Place Order</button>;
}

Why can a customer end up charged twice from a single order attempt?

Nothing disables the button or guards against re-entry while the first click's async work is still in flight, so a second click before it resolves starts a second, fully independent chargeCard call.

chargeCard automatically retries once if the network is slow, doubling the charge.

React batches the two await calls into a single request, doubling cart.total.

onClick handlers in React always fire twice in production builds.