Challenge: Dynamic Registration Form with Optimistic Feedback

Build a dynamic registration form in React 19 using controlled and uncontrolled inputs along with modern hooks like useFormStatus, useActionState, and useOptimistic.

We'll cover the following...

Problem statement
- Expected output
Try it yourself

Problem statement

You’re developing the registration form for a new social platform, ReactConnect.The form should allow users to enter their name, email, and password, validate input before submission, and provide instant feedback while the data is being “saved” to the server.

You’ll use controlled components for real-time validation, React form hooks for submission tracking, and useOptimistic for instant UI updates while simulating a server request.

Technical requirements:

Build a registration form with fields for name, email, and password.
Each field should be a controlled component, storing its value in React state.
Validate inputs:
1. Name must not be empty.
2. Email must include “@”.
3. Password must be at least 6 characters long.
Use useFormStatus to display a Submitting… message while the form is being processed.
Use useActionState to handle simulated async form submission and reset form fields on success.
Use useOptimistic to:
1. Show the newly registered user’s name instantly below the form as Pending Registration: [Name] before confirmation.
2. Replace it with a success message once the fake server resolves.

Expected output

User fills the form.
On clicking Register, form validates inputs:
- Invalid fields show inline error messages.
On valid submission:
- Shows Submitting… below the button (useFormStatus).
- Displays Pending Registration: [Name] instantly (useOptimistic).
- After a short delay, replaces it with Successfully registered [Name]!.
Form resets after submission.