React Best Practices

Chapter 5 of 8 · 5 practices · 3 min · 4-question quiz

Forms and actions in React 19

React 19 Actions handle pending state, errors and form resets for you. This chapter shows the hooks to use and how to keep mutations safe.

Start: Pass a function to the form action prop for submissions

5 practices in this chapter

  1. 1Pass a function to the form action prop for submissionsIn React 19 a <form> can take a function as its action. React then: calls it with the form's FormData inside a transition; tracks the pending state; resets uncontrolled fields after a…
  2. 2Track results and errors with useActionStateuseActionState(action, initialState) returns three things: the current state; a wrapped action to pass to the form; an isPending flag
  3. 3Read pending state in child components with useFormStatusA reusable submit button should not need a loading prop from every form that uses it. useFormStatus from react-dom reads the status of the parent form, including pending, so the button can…
  4. 4Show instant feedback with useOptimisticFor actions that almost always succeed, update the UI before the server answers. useOptimistic gives you a temporary state that shows the expected result while the action runs, and falls back to…
  5. 5Validate every submission on the server as wellClient validation with required, type="email" and pattern gives fast feedback, but anyone can bypass it with the dev tools or a direct request.

Check yourself on this chapter

4 questions, right here once you are signed in. Your progress is saved as you read.

Sign up for the quiz