Both clicks of a fast double click got past a state check: guard async re-entry with a ref set at once

import { useRef, useState } from "react";
type PillState = "ready" | "adding" | "added" | "error";
export function useAddOnce(addToBag: () => Promise<void>) {
  const [pill, setPill] = useState<PillState>("ready");
  const addingNow = useRef(false);
  const token = useRef(0); // choosing another size bumps it, so a late answer is ignored
  const add = async () => {
    // before: if (pill === "adding") return;
    if (addingNow.current) return;
    addingNow.current = true;
    const mine = ++token.current;
    setPill("adding");
    try {
      await addToBag();
      if (mine === token.current) setPill("added");
    } catch {
      if (mine === token.current) setPill("error");
    } finally {
      addingNow.current = false;
    }
  };
  return { pill, add };
}