# form useActionState

> Practice creating a basic form using the useActionState approach.

- Difficulty: intermediate
- Tags: useActionState, forms, react 19
- Estimated time: 30 minutes
- Tests: 4
- Requires subscription: no

## Overview

Practice creating a basic form using the useActionState approach.


## Requirements

- Use the `useActionState` hook to handle form submission and state management.
- Implement an `action` function that:
  - Validates that all fields (`name`, `email`, `country`) are filled.
  - Returns an error message if any field is missing.
  - Keeps the values the user already entered when validation fails.
  - Waits 1 second (simulating an async request) before returning a success response.
  - Resets the form fields after successful submission.
- Display:
  - A loading state (`Submitting...`) while the form is being processed.
  - An error message when validation fails.
  - A success message when submission completes successfully.
- Disable the submit button while submitting.


## Notes

- `useActionState` receives the `action` function and an initial form state object.
- The `action` function should return the updated form state after validation or submission.
- Use the returned state object to show errors or success messages dynamically.
- Always use `defaultValue` for form inputs when controlled by `useActionState`.
- On validation error, return the submitted values so the inputs keep what the user typed; only clear them on a successful submission.
- The `action` prop on `<form>` should point to the function returned by `useActionState`.


## Tests

01. shows error if fields are missing
02. keeps provided fields when validation fails
03. shows submitting state while waiting
04. shows success message and resets fields after submit