Race condition inside a function using derived value

[Brandontam29]

When a value in the derived store is used within a function after the original store value has been changed, there is a race condition.

Here is a simplified version my code.

const hasSoldoutItems = useDerivedBagStore((state) => state.hasSoldoutItems);
const removeSoldoutItems = useBagStore((state) => state.removeSoldoutItems);
const { handleCheckoutOpen } = useLayoutContext();

const goToCheckout = async () => {
    if (hasSoldoutItems) {
      removeSoldoutItems();
    }

    if (hasSoldoutItems) return;

    if (numberOfBagItems === 0) return;

    handleCheckoutOpen();
  };

[dai-shi]

Sounds like nice catch. Could you create a minimal reproduction with https://codesandbox.io/s/react-new ?