How do I run a function inside the browser after the call to action() returns?

[offchan42]

For example, let's say I have a sign-in form, when user submits this form, it will call the action() function on the /signin route. If the user type incorrect password, I can render an error message above the form using the useActionData() hook.

But what if I want to show a toast popup instead of rendering an error message above the form?
Let's say I have a toast function that I can call on the browser to show a toast, how can I run this toast function if the action returns an error?

This sounds super simple or pretty straightforward but I don't know how to do it. useEffect() on the action data is not a good solution because action data could return the same error multiple times but the effect will be triggered only once.

[Erij-Maherzia-BEN-BRAHIM]

hi @off99555 to display the same error message multiple times from the useEffect, you have only to update the array of dependencies this way 👇🏻

const actionData = useActionData<typeof action>()

useEffect(()=>{

		if(actionData){

			if("errorMessage" in actionData){

			displayErrorToast(actionData.errorMessage)			// call your toast function here

			}

}
},[actionData])

or you can this library to handle your toasts 👇🏻
https://github.com/Code-Forge-Net/remix-toast

[offchan42]

Thanks @Erij-Maherzia-BEN-BRAHIM , I'll check and if it works I'll mark as answer.

[offchan42]

Haven't checked remix-toast yet but the actionData dependency on useEffect seems to work.

[offchan42]

1. It seems like remix-toast is mostly for showing message after returning from the action function, but it cannot show a toast before the return statement, right?
2. It doesn't support modifying any state of the client side, right? For example, I might want to increment a counter every time form submission is successful. I might have to create a useEffect for this.

[Erij-Maherzia-BEN-BRAHIM]

1- The principle of remix-toast is to set a flash cookie inside the action function, so we do it at the level of the return
2- You can do it this way 👇🏻

import { jsonWithSuccess } from "remix-toast";

export async function action({ request }: DataFunctionArgs) {
//... your logic

if(responseIsSuccessfull){
  return jsonWithSuccess({ successMessage: "You can write anything" }, "Operation successful! 🎉");

}
//The rest of your code
}

export default function YourClientComponent() {
const actionData = useActionData<typeof action>()

const [counter, setCounter]= useState<number>(0)

useEffect(()=>{

		if(actionData){

			if("successMessage" in actionData){

			setCounter(counter+1)		// Increment the counter

			}

}
},[actionData])
}

[kimthompson]

I used this mechanism to trigger toast messages on the Remix site I built about six months ago, but it silently stopped working at some point. useActionData now returns nothing (undefined, specifically) no matter what I try. This person on StackOverflow seems to be running into the same issue, but hasn't received any sort of response. https://stackoverflow.com/questions/79353472/react-remix-useactiondata-not-triggered-by-incoming-webhook-post-request?newreg=8439d471eb624fa4b622ca2ce3c97427

I eventually got around it by making use of the useFetcher hook I was using on that page anyway and using useEffect to monitor the status and data return on that instead.

[sergiodxa]

A better solution now is to use a clientAction

export async function action() {
  // do things here and return a response
}

export async function clientAction({ serverAction }) {
  let actionData = await serverAction<typeof action>()
  // do things here client-side
  return actionData // you could also replace this with another value or add client-side value
}

[gustavopch]

These days, it's also possible to await submit(), but it doesn't return anything. It may be useful if you need to use things that are in the scope of the component.

[Erij-Maherzia-BEN-BRAHIM]

I used this mechanism to trigger toast messages on the Remix site I built about six months ago, but it silently stopped working at some point. useActionData now returns nothing (undefined, specifically) no matter what I try. This person on StackOverflow seems to be running into the same issue, but hasn't received any sort of response. https://stackoverflow.com/questions/79353472/react-remix-useactiondata-not-triggered-by-incoming-webhook-post-request?newreg=8439d471eb624fa4b622ca2ce3c97427

I eventually got around it by making use of the useFetcher hook I was using on that page anyway and using useEffect to monitor the status and data return on that instead.

If you are using useFetcher you won't receive anything in useActionData
You can find the expected result inside fetcher.data