Hovering a custom toast causes the component an unnecessary re-render

[HZSamir]

Hello, first of all let me thank you for this nifty project. I am trying to implement a progress bar in my toasts. To that end I am implementing the custom ToastBar component. The progress bar performs beautifully, until you hover the notification, at which point the interval seems to 'lock', and the component re-renders needlessly. What this means effectively is that the loading progress bar accumulates a few milliseconds of delay every time the user hovers it. And if hovered enough times, you can clearly notice the notification disappearing much later than the 5 seconds of lifetime it should have. I have created a small Codesandbox example to demonstrate. When firing the toast, rapidly hover in and out to see the issue. I have not tested this with the default toast, but I imagine the same issue exists.

PS: It also seems this triggers a re-render of the entire tree in my app, though I have not been able to reproduce that in Codesandbox. (FYI: The component is at the very top of my tree), any clue as to why that happens?

PPS: The unnecessary re-render also occurs on the default toast.

Thank you very much for your time.

[timolins]

It looks like it's caused by the "pause on hover" feature, which prevents toasts from being dismissed while the users is hovering over them.

The progress bar in the example you provided doesn't respect this pause, which will lead to the difference you described.

You can get the current pause state via the useToasterStore hook, and pass it to your progress bar. Here is an updated example.

Let me know if this helped, closing this for now.