Theo's Typesafe Cult•11mo ago

Shadcn Toast not showing using useEffect

Hello. I am trying to render a shadcn toast after a redirect from a server action, but first, I need to be able to render a toast on page load.

export default function Page() {
  const { toast } = useToast();
  useEffect(() => {
    console.log("hello");
    toast({
      title: "Test",
      description: "Test",
    });
  }, [toast]);

export default function Page() {
  const { toast } = useToast();
  useEffect(() => {
    console.log("hello");
    toast({
      title: "Test",
      description: "Test",
    });
  }, [toast]);

I can't figure out why this does not work... anyone here that has used this library might help? Thanks in advance!

7 Replies

Y7YA•11mo ago

Did you add the <Toaster/> component in layout?

AmazingViegasOP•11mo ago

Yes! It works when I render a toast on button click just not on useEffect

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {children}
        <Toaster />
      </body>
    </html>
  );
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {children}
        <Toaster />
      </body>
    </html>
  );
}

And the same happens in Sonner toasts btw

Y7YA•11mo ago

And the page is a client component?

AmazingViegasOP•11mo ago

Yes, I think it really is a Sonner bug

AmazingViegasOP•11mo ago

I made this stackblitz that perfectly demonstrates my problem: https://stackblitz.com/edit/stackblitz-starters-hzwlsc?file=app%2Flayout.tsx

Luís Viegas

StackBlitz

Next.js Starter - StackBlitz

The React framework for production

Y7YA•11mo ago

Weird but this hack fixes it:

    setTimeout(() => {
      toast('hello');
    })

    setTimeout(() => {
      toast('hello');
    })

Let me know if you find a real fix

AmazingViegasOP•11mo ago

Thank you for the tip! I openned an issue in the lib's github. Will let you know when something happens.

Gaming

Programming

Shadcn Toast not showing using useEffect