Toast not showing using useEffect

[luis-viegas]

Hello. I am trying to render a 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]);

I can't figure out why this does not work... any help?

Thanks in advance!

[lucasfelixc]

Hello @luis-viegas, I don't know if I understand perfectly, maybe it would be good if you created a codepen with the example, but I understand that you want to show a toast before the redirection, if so, you can just invoke the toast function before the redirection, I want say, where you are dispatching the redirect, you can simply invoke the toast beforehand. if I got it wrong, can you give us more details?

[luis-viegas]

Does invoking the toast before redirection work? Won't it be invoked in the page before the redirect thus never being shown?

Nevertheless, I have created a stackblitz that illustrates the problem that I think exists: https://stackblitz.com/edit/stackblitz-starters-hzwlsc?file=app%2Ftest%2Fpage.tsx

[lucasfelixc]

Well, from what I understand you want to show two toasts, right? The first one to show a loading feedback and the last one after redirection, is that it? If yes, you can create route events to show the toast while loading the redirect.