Reset error data in useActionState to help Toast
Unanswered
African Slender-snouted Crocodil… posted this in #help-forum
African Slender-snouted CrocodileOP
With this setup, when the first Toast is called say "User does not Exist" and the form is being called again and I get the same error, the toast would not be called because it's the same string so the useEffect wouldnt work. Any help?
3 Replies
You’re directly passing the action returned by useActionState to the form?
I answered some related issue in another thread I’ll copy paste:
a) You could instead use the onSubmit on the form, especially if you need data from the event object it gets passed.
The way we used to do it before actions, then inside the handleSubmit(), tho less elegant.
1- you start an async transition
2- you call and await the action returned by useActionState() inside the transition,
3- and after getting the response back from the action, you call the toast()
b) just make an async wrapper for the function you pass to the action prop:
a) You could instead use the onSubmit on the form, especially if you need data from the event object it gets passed.
The way we used to do it before actions, then inside the handleSubmit(), tho less elegant.
1- you start an async transition
2- you call and await the action returned by useActionState() inside the transition,
3- and after getting the response back from the action, you call the toast()
b) just make an async wrapper for the function you pass to the action prop:
<form action = { async (formData) => {
// i assume this "action "is returned from the useActionState hook, right?
const response = await action(formData);
// call your toast
toast()
} } >I wouldn’t do it inside of an Effect, effects should be seen as an API for synchronization, and since most “side-effects” are trigger by direct user interactions, you shouldn’t need an Effect, instead that side-effect logic can be handled in event handlers or action callbacks wrapppers instead
Where would you put this logic in?
a) in the render function of the component who's getting the response back by doing a “if(condition)” check => (worst approach)
b) inside a use effect that's listening on the "state" variable returned by the action => might not work in cases like yours where the state variable content doesn’t change even if the action was re triggered
c) event handler / action callback => this ensures the toast will run every time the action is triggered, it’ll be a side effect to a user interaction, that’s what you probably want
I believe this should be considered a side effect and should be done in either an event handler or an action callback wrapper, this logic is being trigger by some user action, it's not part of the component render or sync logic (IMO this shouldn't synchronize inside an useEffect).
Where would you put this logic in?
a) in the render function of the component who's getting the response back by doing a “if(condition)” check => (worst approach)
b) inside a use effect that's listening on the "state" variable returned by the action => might not work in cases like yours where the state variable content doesn’t change even if the action was re triggered
c) event handler / action callback => this ensures the toast will run every time the action is triggered, it’ll be a side effect to a user interaction, that’s what you probably want
I believe this should be considered a side effect and should be done in either an event handler or an action callback wrapper, this logic is being trigger by some user action, it's not part of the component render or sync logic (IMO this shouldn't synchronize inside an useEffect).