How to reset useActionState state

[native perch]

If I use useActionState and a dialog, how do I reset useActionState's state variable upon closing the dialog? const [state, formAction, pending] = useActionState(deleteAction, initialState);
<Dialog open={deleteIsOpen} onClose={() => { setDeleteIsOpen(false); setRowToBeDeleted(null); }} > <DialogPanel> <form action={formAction}> // ...

[jade pilot]

Hi @native perch. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To reset the state from useActionState when closing a dialog, you need to manage a separate piece of state that you can reset manually, since useActionState itself does not provide a built-in reset function. One common approach is to use a custom hook that wraps useActionState and exposes a reset function. Here’s an example pattern from the knowledge sources:

import { useActionState, useEffect, useState } from 'react'

const useResettableActionState = ({ initialState, action }) => {
  const [state, setState] = useState(initialState)
  const [data, formAction, isPending] = useActionState(action, initialState)

  // Update local state when action state changes
  useEffect(() => {
    if (!isPending) setState(data)
  }, [isPending])

  const resetState = () => setState(initialState)

  return {
    state,
    formAction,
    isPending,
    resetState,
  }
}

You can then use this hook in your component and call resetState when the dialog closes:

const { state, formAction, isPending, resetState } = useResettableActionState({ initialState, action: deleteAction });

<Dialog
  open={deleteIsOpen}
  onClose={() => {
    setDeleteIsOpen(false);
    setRowToBeDeleted(null);
    resetState(); // Reset the action state here
  }}
>
  <DialogPanel>
    <form action={formAction}>
      {/* ... */}
    </form>
  </DialogPanel>
</Dialog>

This approach ensures that the state is reset whenever you close the dialog, giving you full control over the form state lifecycle. This pattern is directly referenced from a community solution and is currently a recommended workaround, as useActionState does not natively support resetting its state variable on demand in Next.js 15+ see example<source><https://github.com/vercel/next.js/issues/72949</source>.>

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@native perch Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[native perch]

@jade pilot how do I fix this error?

Expected 1 arguments, but got 2.ts(2554)
const initialState: {
status: "idle";
message?: string | undefined;
errors?: Record<string, string[]> | undefined;
}

const { state, formAction, pending, resetState } = useResettableActionState(
deleteAction,
initialState // error here
);

import { ActionState } from '@/app/types';
import { useActionState, useEffect, useState } from 'react';

type ResetActionStateProps = {
action: (state: ActionState, payload: FormData) => ActionState | Promise<ActionState>;
initialState: ActionState;
};

export function useResettableActionState({
initialState,
action,
}: ResetActionStateProps) {
const [state, setState] = useState(initialState);
const [data, formAction, pending] = useActionState(action, initialState);

// Update local state when action state changes
useEffect(() => {
if (!pending) setState(data);
}, [pending, data]);

const resetState = () => setState(initialState);

return {
state,
formAction,
pending,
resetState,
};

[jade pilot]

Let me check the knowledge base for you again. Give me one moment! :books:

---

The error

Expected 1 arguments, but got 2.ts(2554)

is caused because your call to useResettableActionState is passing two arguments:

const { state, formAction, pending, resetState } = useResettableActionState(
    deleteAction,
    initialState // error here
);

But your hook is defined to accept a single object argument (a props object with keys action and initialState):

export function useResettableActionState({
  initialState,
  action,
}: ResetActionStateProps) { ... }

How to fix:
You should call the hook with a single object argument, like this:

const { state, formAction, pending, resetState } = useResettableActionState({
  action: deleteAction,
  initialState,
});

This matches the expected parameter structure of your hook and will resolve the TypeScript error.

This pattern is consistent with the custom hook usage shown in the knowledge sources, where the hook expects a single object parameter containing both the action and initialState properties see example<source><https://github.com/vercel/next.js/issues/72949</source>.>

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: