useActionState in Next.js

useActionState connects server actions with UI state. It helps handle form submissions, validation, and feedback cleanly.

What is useActionState?

It manages server action results and automatically updates the UI after submission.

How does it work?

const [state, action, pending] =
useActionState(serverAction, initialState);

• state → latest server result
• action → form handler
• pending → loading indicator

Example — Form with Server Feedback

Why use it?

• Clean server form handling
• Automatic UI updates
• Validation feedback
• Built-in loading state

Real-World Example

A signup form validates data on the server and instantly shows success or error messages.

Interview Tip

useActionState links server actions with client UI state, simplifying modern form handling.