async onClick with multiple setStates not working as expected

Question

BACKGROUND

I have a object that I am referencing to toggle state changes in an onClick event.

const map = {
      active: {
        name: "sliceA",
        toggle: (map) => map.inactive
      },
      inactive: {
        name: "sliceB",
        toggle: (map) => map.active
      }
    }

useState of component either holds map.acive or map.inactive slice of object via a transition function.

const [slice, setSlice] = useState(map.active);

const transition = (getMethod) => {
    const getNewSlice = getMethod(slice);
    const result = getNewSlice(map);
    setSlice(result);
  };

This works as I expect until you attempt multiple state changes in a single onClick event.

const handleClick = async () => {
    try {
      transition(slice => slice.toggle);
      await stall();
      transition(slice => slice.toggle);
    } catch (err) {}
  };

ISSUE

See link - codesandbox1

If you click button X1 the 2nd transition() in handleClick() will not trigger state change.

If you click button X2 the 2nd transition() in handleClick() will trigger state change.

REQUEST

Why is this happening and is there a way to fix? I made another more manual way of setting state and it operates as expected - codesandbox2

Answer 1

The reason is both transition calls in one handleClick call refer to the state of slice from the render call transition was defined in. In other words, setState doesn't update the slice the transtion has a closure over.

To make it always act on the current state, use a callback setter. currentSlice will be updated between render calls as well:

const transition = (getMethod) => {
  setSlice((currentSlice) => {
    const getNewSlice = getMethod(currentSlice);
    return getNewSlice(map);
  });
};

Sandbox link