๐ฅ๐ฒ๐ฎ๐ฐ๐ ๐ญ๐ต ๐๐ผ๐ฟ๐บ ๐๐ผ๐ผ๐ธ๐
React 19 simplifies how you handle forms. You no longer need manual loading states or error handling. Stop using e.preventDefault().
Use these three hooks:
useActionState: Manages form state. Import this from react. It replaces useFormState. It provides the state, the action, and isPending.
useFormStatus: Tracks if the form is submitting. You must put this in a child component. It does not work in the form component itself.
useOptimistic: Updates the UI instantly. It shows the result before the server finishes. React rolls back the change if the server fails.
Avoid these common mistakes:
- Import useActionState from react. Do not import it from react-dom.
- Add prevState as the first argument in your server action.
- Add use client to the top of your component file.
- Put useFormStatus in a separate child component.