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
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);
});
};