consectetur adipiscing elit. Suspendisse ultrices. Excepteur sint occaecat cupidatat non proident.

test
Sanity Image

What’s new in React 19

Actions

A common use case in React apps is to perform a data mutation and then update state in response. For example, when a user submits a form to change their name, you will make an API request, and then handle the response. In the past, you would need to handle pending states, errors, optimistic updates, and sequential requests manually.

The async transition will immediately set the isPending state to true, make the async request(s), and switch isPending to false after any transitions. This allows you to keep the current UI responsive and interactive while the data is changing.

Note

By convention, functions that use async transitions are called “Actions”.

Actions automatically manage submitting data for you:

  • Pending state: Actions provide a pending state that starts at the beginning of a request and automatically resets when the final state update is committed.
  • Optimistic updates: Actions support the new useOptimistic hook so you can show users instant feedback while the requests are submitting.
  • Error handling: Actions provide error handling so you can display Error Boundaries when a request fails, and revert optimistic updates to their original value automatically.
  • Forms: <form> elements now support passing functions to the action and formAction props. Passing functions to the action props use Actions by default and reset the form automatically after submission.