[bug] dismissing toast timing desync

[KirillTregubov]

#586 has introduced a sneaky bug.

Take the following React code:

useEffect(() => {
    if (conditional) {
      toast.warning('Toast', { id: 'toast-id' })
    }

    return () => {
      toast.dismiss('toast-id')
    }
  }, [conditional])

In Strict mode, during development, the component mounts twice. This results in the effect running, then the return callback is called, then the effect is re-run. Since #586 adds a setTimeout to the dismiss logic, this causes the toast to sometimes be dismissed after the new toast is created (because the dismiss called in the return is now delayed by a tick), where previously the code worked as intended (shows the toast on mount, hides it on unmount).

There is also another instance where I have a rotating set of ids so that I can show multiples of the same toast and the old one can be dismissed so that it nicely animates away. The code looks roughly like the following:

const [toastIndex, setToastIndex] = useState(0)

// in function:
toast.dismiss(toastIds[toastIndex])
const newIndex = (toastIndex + 1) % toastIds.length
toast.success(`Toast`, { id: toastIds[newIndex] })
setToastIndex(newIndex)

This also results in flaky behaviour, where sometimes the new toast won't show up.

Summary

I see that #586 serves to fix #584. Please offer some guidance for the given use-cases. Maybe there is an alternative solution that can be explored.