If you have a transition like this:
const [phase, setPhase] = useState(1)
const transition = useSwitchTransition(phase, 300, 'out-in');
and you quickly cycle form 1 -> 2 -> 1:
setPhase(2);
setPhase(1);
the output of the stage in the transition callback will be 1, leave
{transition((state, stage) => (
/* stage will be equal to 'leave' */
...
Current workaround is to add a random number to phase:
export const setFormattedPhase = (phase) => {
return ${phase}_${Math.random()};
};
export const getFormattedPhase = (stage?: phase) => {
return Number(phase?.split('_')[0]);
};
then
const [phase, setPhase] = useState(1)
const transition = useSwitchTransition(setFormattedPhase(phase), 300, 'out-in');
...
setPhase(2);
setPhase(1);
To me it seems like a key issue, and transition-hook is just reusing a component that was not finished unmounting, but kept the stage
If you have a transition like this:
and you quickly cycle form 1 -> 2 -> 1:
the output of the stage in the transition callback will be 1,
leaveCurrent workaround is to add a random number to phase:
export const setFormattedPhase = (phase) => {
return
${phase}_${Math.random()};};
export const getFormattedPhase = (stage?: phase) => {
return Number(phase?.split('_')[0]);
};
then
To me it seems like a key issue, and transition-hook is just reusing a component that was not finished unmounting, but kept the stage