Reset the state of useActionState

[SaadAhmadSaddiqui]

Summary

Is there a way to reset the state of the useActionState? I'm using the state like the example below, and once the deleteDate.success turns to true, it stays there. Is there a way to turn it back? The only way I found is this deleteState.success = false; // Reset success state, but I'm not sure if that's a bad way to go about it.

const deleteRowAction = deleteRow.bind(null, { table, keyProperty, id: deleteId!, pathname });
const [deleteState, deleteAction, deletePending] = useActionState(deleteRowAction, { success: false, error: "" });

...

useEffect(() => {
	if (deleteState.success) {
		setDetailsStore((prev) => ({ ...prev, tableData: prev.tableData?.filter((item) => item[keyProperty] !== deleteId) }));
		setDeleteId(null);
                deleteState.success = false; // Reset success state
	} else if (deleteState.error) {
		alert(deleteState.error);
	}
}, [deleteId, deleteState, keyProperty, setDetailsStore]);

...

{/* Delete Dialog */}
<Dialog open={deleteId !== null} onOpenChange={() => setDeleteId(null)}>
	<DialogContent>
		<DialogHeader>
			<DialogTitle>Are you sure you want to delete this item?</DialogTitle>
			<DialogDescription>This action cannot be undone. This will permanently delete the row from the {table} and remove the data from our servers.</DialogDescription>
		</DialogHeader>
		<DialogFooter>
			<Button variant="outline" onClick={() => setDeleteId(null)}>
				Cancel
			</Button>
			<form action={deleteAction}>
				<Button type="submit" loading={deletePending} aria-disabled={deletePending} variant="destructive">
					Delete
				</Button>
			</form>
		</DialogFooter>
	</DialogContent>
</Dialog>

Additional information

No response

Example

No response

[icyJoseph]

May I ask, why do you need to reset it? that state value is whatever your action returned last. Resetting it, feels unnecessary in the use case you shared.

[SaadAhmadSaddiqui]

Hey Joseph, I recorded this quick loom to give an idea of the use case, although I think I have found a solution for myself. I might have been just looking at it the wrong way. I request you to give your opinion on the solution A and B!

Loom Video

[columk1]

I'm having a similar issue where I'm incrementing a value in an effect or displaying an error based on whether the action was a success or not. It's causing an infinite loop and I haven't found a nice way around it. Setting state.success = false is what I ended up with.

It would be nicer to be able to reset the state once the response has been handled, since the form is being used in a component that stays mounted and the form itself is reset each time it is submitted.

[aeioyu]

i'm also facing a scenario that need to reset state of useActionState. When submitted form to action and doing some validation, return error state when failed and show the error message under input box. Then i need to hide error message when user change the invalid input data to new value.

currently i need to create submitted state and use the useEffect to watch state change then update submitted to true and need to add onChange on every input to reset submitted state to false using to control the error message display.