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.