Show a toast after a form POST redirect

[robcaldecott]

I am following the tutorial and would like to show a toast after successfully deleting a user but I cannot figure out the best way to do this.

Currently I am using a magic destroy route that has a single action to remove the user and then redirect back to the home page, something like this:

export async function action({ params }: ActionFunctionArgs) {
  await deleteUser(params.id as string);
  return redirect("/");
}

I then use Form to POST to the route (again, as per the tutorial)

<Form method="post" action="destroy">
  <button type="submit">Delete</button>
</Form>

This is fine and works as per the docs but I would now like to add some form of notification (like a toast) to the user when the redirect completes.

Options I have messed with so far:

Use a URL param on the redirect
I could do something like this:

redirect("/?showDeleteToast=1");

The root route could look for this param, show the toast and then use useSearchParams to remove it. The problem here is the user could end up in a situation where a page refresh shows the toast again. While I am a fan of keeping state in the URL I am not sure this is a good fit.

Use useFetcher and useFetchers
Another idea is using useFetcher for the form submission and have the root route call useFetchers looking for a successful action completion (if that is possible), showing the toast via some useEffect magic.

The problem here is the /user/:id route is getting re-rendered after the form is submitted and attempts to load a user who now no longer exists, which throws an error. What I need to do here is manually redirect to the home page after the form submission is completed but I can't see the best way to do this.

I really like using a special destroy route coupled with Form: I think it's a lovely pattern, but I cannot see how I can "know" when the action has completed in order to show my toast.

Any advice here is welcome.

[robcaldecott]

After experimenting a bit more with useLocation in my root route, this seems to work but I don't know how reliable it would be or even if it is working just by sheer luck 😅

const navigation = useNavigation();

React.useEffect(() => {
  if (
    navigation.state === "loading" &&
    navigation.formAction?.includes("destroy")
  ) {
    toast("User successfully deleted", { type: "success" });
  }
}, [navigation]);

Is this too brittle?