RFC: Best practices for passing additional parameters to useActionState

[SwiichyCode]

Context

When using useActionState with the Server Action Pattern, we often need to pass additional parameters that aren't part of FormData (such as userId, permissions, etc.).

Problem Statement

Currently, there's no clear documentation on the best way to handle these use cases. Possible approaches include:

1. Closure on the action function
2. React Context
3. Extending the useActionState API

Proposal

It would be valuable to have an official recommendation or recognized pattern for handling these common use cases.

Questions

• What is the recommended approach?
• Are there any performance implications?
• How does this integrate with Next.js's security model?

Additional information

export const NoteForm = ({ userId }: NoteFormProps) => {
  const [state, action] = useActionState(
    async (state: FormState, formData: FormData) => createNoteAction(state, formData, userId),
    undefined,
  );
  ...
};

// Server action 

export async function createNoteAction(state: FormState, formData: FormData, userId: string) {
...
}

Example

No response

[RobinClowers]

Seems like the answer here is probably binding additional arguments. Alternatively, using hidden fields in your form would be the natural web standards approach.

[Umuts-Codes]

Hi,

When passing additional parameters to useActionState in the Server Action Pattern, there are a few established approaches depending on your needs:

Closure in the action function

As you already demonstrated, you can capture external parameters (like userId) in a closure when defining the action.

This is straightforward, secure, and avoids extra boilerplate.

Example:

const [state, action] = useActionState(
async (state: FormState, formData: FormData) => createNoteAction(state, formData, userId)
);

React Context:

If multiple components need the same parameter, or if the parameter is dynamic per session/user, React Context is a clean way to provide it.

This avoids prop drilling and keeps the action signature simple.

Extending useActionState:

Currently, useActionState doesn’t officially support passing extra parameters via its API.

Creating a wrapper around the hook can allow standardized passing of additional data across your app, but this is more advanced and requires careful typing.

Performance and Security:

Both closures and React Context have negligible performance impact in typical use cases.

Always ensure that sensitive data is validated and sanitized server-side, since client-sent parameters can’t be fully trusted.

Recommendation:

For most use cases, closures are the simplest and most reliable approach.

Use React Context if you have shared, dynamic data across multiple components.

Avoid overcomplicating the API unless you need a global standardized pattern.

This pattern aligns with Next.js’s security model and keeps your Server Actions predictable and maintainable.