Repository navigation
Toast is never shown if called before Toaster subscribes to ToastState #723
Description
Toaster component calls ToastState.subscribe in a useEffect (code). If the app calls toast(...) on page load, it might run before the call to subscribe and the toast is never shown.
Example code from our app:
const ToastShownOnPageLoad = () => {
useEffect(() => {
if (!shouldShowToast)
// This toast will never show up
const toastId = toast.custom(...);
return () => {
toast.dismiss(toastId);
};
}, [shouldShowToast]);
return null;
}
const App = () => {
return <div>
<ToastShownOnPageLoad />
<Toaster />
</div>
}A possible workaround is to wrap the call to toast.custom(...) in a setTimeout with 0 delay like so:
const ToastShownOnPageLoad = () => {
useEffect(() => {
if (!shouldShowToast)
let toastId;
setTimeout(() => {
// This toast will show up
toastId = toast.custom(...);
});
return () => {
if (toastId) toast.dismiss(toastId);
};
}, [shouldShowToast]);
return null;
}
const App = () => {
return <div>
<ToastShownOnPageLoad />
<Toaster />
</div>
}or alternatively to re-arrange the render order of your components so that Toaster is rendered before ToastShownOnPageLoad (useEffect hooks seem to run in the order the components were rendered, but I haven't confirmed that this is guaranteed):
const ToastShownOnPageLoad = () => {
useEffect(() => {
...
}, [shouldShowToast]);
return null;
}
const App = () => {
return <div>
<Toaster />
<ToastShownOnPageLoad />
</div>
}We can currently work around this issue since we've identified the cause, but it would be nice to not have to worry about the render order!
Reproduction of the issue: https://codesandbox.io/p/sandbox/z8x2mr
Activity
DanielGiljam commentedon Dec 19, 2025
Yeah, I've run into this issue as well. Would be cool if
sonnerinternally would queue uptoastcalls untilToasterhas mounted and and then flush the queue afterToasterhas mounted.Fix a batch of reported issues
Fix a batch of reported issues (#777)