`useOptimistic` is redundant when sonner is in use

[xc1427]

This is not a bug report, but rather an observation for those who might encounter similar confusion.

sonner manages its own state regarding dismissal, and the dismiss action takes immediate visual effect, regardless of whether useOptimistic is used.

In essence, a simplified client-toasts.tsx will function seamlessly:

"use client";

import { useEffect, useState } from "react";
import { Toaster as SonnerToaster, toast as sonnerToast } from "sonner";

type Toast = {
  id: string;
  message: string;
  dismiss: () => Promise<void>;
};

export function ClientToasts({ toasts }: { toasts: Toast[] }) {
  const localToasts = toasts.map((toast) => ({
    ...toast,
    dismiss: async () => {
      await toast.dismiss();
      console.log('debug', 'dismissal complete');
    },
  }));

  const [sentToSonner, setSentToSonner] = useState<string[]>([]);

  useEffect(() => {
    localToasts
      .filter((toast) => !sentToSonner.includes(toast.id))
      .forEach((toast) => {
        setSentToSonner((prev) => [...prev, toast.id]);
        sonnerToast(toast.message, {
          id: toast.id,
          onDismiss: () => toast.dismiss(),
          // onAutoClose: () => toast.dismiss(),
          closeButton: true,
          position: "top-right",
        });
      });
  }, [toasts, sentToSonner]);

  return <SonnerToaster />;
}

[xc1427]

All in all, though this pattern is interesting to explore, it seems not to be a good idea to rely on the server to remove a toast which is highly client-oriented. For instance, if a server action is not successfully sent to the server, then the next time the page is refreshed, the user will see a toast appear, which is very strange and confusing.