diff --git a/docs/02-app/01-building-your-application/01-routing/05-error-handling.mdx b/docs/02-app/01-building-your-application/01-routing/05-error-handling.mdx index a2dc4be918fa4..fff77df1ed8ee 100644 --- a/docs/02-app/01-building-your-application/01-routing/05-error-handling.mdx +++ b/docs/02-app/01-building-your-application/01-routing/05-error-handling.mdx @@ -8,16 +8,18 @@ related: Errors can be divided into two categories: **expected errors** and **uncaught exceptions**: -- **Model expected errors as return values**: Avoid using `try`/`catch` for expected errors in Server Actions. Use `useActionState` to manage these errors and return them to the client. +- **Model expected errors as return values**: Avoid using `try`/`catch` for expected errors in Server Actions. Use [`useActionState`](https://react.dev/reference/react/useActionState) to manage these errors and return them to the client. - **Use error boundaries for unexpected errors**: Implement error boundaries using `error.tsx` and `global-error.tsx` files to handle unexpected errors and provide a fallback UI. +> **Good to know**: These examples use React's `useActionState` hook, which is available in React 19 RC. If you are using an earlier version of React, use `useFormState` instead. See the [React docs](https://react.dev/reference/react/useActionState) for more information. + ## Handling Expected Errors Expected errors are those that can occur during the normal operation of the application, such as those from [server-side form validation](/docs/app/building-your-application/data-fetching/server-actions-and-mutations#server-side-form-validation) or failed requests. These errors should be handled explicitly and returned to the client. ### Handling Expected Errors from Server Actions -Use the `useActionState` hook (previously `useFormState`) to manage the state of Server Actions, including handling errors. This approach avoids `try`/`catch` blocks for expected errors, which should be modeled as return values rather than thrown exceptions. +Use the [`useActionState`](https://react.dev/reference/react/useActionState) hook to manage the state of Server Actions, including handling errors. This approach avoids `try`/`catch` blocks for expected errors, which should be modeled as return values rather than thrown exceptions. ```tsx filename="app/actions.ts" switcher 'use server' diff --git a/docs/02-app/01-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx b/docs/02-app/01-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx index 1d747ce1b6a26..ecc79ffbf616f 100644 --- a/docs/02-app/01-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx +++ b/docs/02-app/01-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx @@ -288,7 +288,7 @@ This will trigger the submission of the nearest `
` ancestor, which will in ### Server-side form validation -We recommend using HTML validation like `required` and `type="email"` for basic client-side form validation. +You can use the HTML attributes like `required` and `type="email"` for basic client-side form validation. For more advanced server-side validation, you can use a library like [zod](https://zod.dev/) to validate the form fields before mutating the data: @@ -351,6 +351,8 @@ Once the fields have been validated on the server, you can return a serializable - By passing the action to `useActionState`, the action's function signature changes to receive a new `prevState` or `initialState` parameter as its first argument. - `useActionState` is a React hook and therefore must be used in a Client Component. +> **Good to know**: These examples use React's `useActionState` hook, which is available in React 19 RC. If you are using an earlier version of React, use `useFormState` instead. See the [React docs](https://react.dev/reference/react/useActionState) for more information. + ```tsx filename="app/actions.ts" switcher 'use server' @@ -440,7 +442,6 @@ export function Signup() { > **Good to know:** > > - Before mutating data, you should always ensure a user is also authorized to perform the action. See [Authentication and Authorization](#authentication-and-authorization). -> - In earlier React Canary versions, this API was part of React DOM and called `useFormState`. ### Pending states diff --git a/docs/02-app/01-building-your-application/09-authentication/index.mdx b/docs/02-app/01-building-your-application/09-authentication/index.mdx index 099d427d79edd..0fb0869292cc8 100644 --- a/docs/02-app/01-building-your-application/09-authentication/index.mdx +++ b/docs/02-app/01-building-your-application/09-authentication/index.mdx @@ -29,7 +29,9 @@ The examples on this page walk through basic username and password auth for educ ### Sign-up and login functionality -You can use the [``](https://react.dev/reference/react-dom/components/form) element with React's [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) and [`useActionState()`](https://react.dev/reference/react/useActionState) to capture user credentials, validate form fields, and call your Authentication Provider's API or database. +> **Good to know**: These examples use React's `useActionState` hook, which is available in React 19 RC. If you are using an earlier version of React, use `useFormState` instead. See the [React docs](https://react.dev/reference/react/useActionState) for more information. + +You can use the [``](https://react.dev/reference/react-dom/components/form) element with React's [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) and [`useActionState`](https://react.dev/reference/react/useActionState) to capture user credentials, validate form fields, and call your Authentication Provider's API or database. Since Server Actions always execute on the server, they provide a secure environment for handling authentication logic.