copy(useFormState): full reviewed translation

Author: tdd

src/content/reference/react-dom/hooks/useFormState.md

@@ -5,13 +5,13 @@ canary: true
 
 <Canary>
 
-The `useFormState` Hook is currently only available in React's canary and experimental channels. Learn more about [release channels here](/community/versioning-policy#all-release-channels). In addition, you need to use a framework that supports [React Server Components](/reference/react/use-client) to get the full benefit of `useFormState`.
+Le Hook `useFormState` n'est actuellement disponible que sur les canaux de livraison Canary et Expérimental de React. Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels). Par ailleurs, vous aurez besoin d'utiliser un framework qui prenne en charge les [React Server Components](/reference/react/use-client) pour tirer pleinement parti de `useFormState`.
 
 </Canary>
 
 <Intro>
 
-`useFormState` is a Hook that allows you to update state based on the result of a form action.
+`useFormState` est un Hook qui vous permet de mettre à jour l'état sur base du résultat d'une action de formulaire.
 
 ```js
 const [state, formAction] = useFormState(fn, initialState);
@@ -23,13 +23,13 @@ const [state, formAction] = useFormState(fn, initialState);
 
 ---
 
-## Reference {/*reference*/}
+## Référence {/*reference*/}
 
 ### `useFormState(action, initialState)` {/*useformstate*/}
 
 {/* TODO T164397693: link to actions documentation once it exists */}
 
-Call `useFormState` at the top level of your component to create component state that is updated [when a form action is invoked](/reference/react-dom/components/form). You pass `useFormState` an existing form action function as well as an initial state, and it returns a new action that you use in your form, along with the latest form state. The latest form state is also passed to the function that you provided.
+Appelez `useFormState` au niveau racine de votre composant pour créer un état de composant qui sera mis à jour [lorsqu'une action de formulaire sera invoquée](/reference/react-dom/components/form). Vous passez à `useFormState` une fonction d'action de formulaire existante ainsi qu'un état initial, et il renvoie une nouvelle action que vous pouvez utiliser dans votre formulaire, ainsi que le dernier état en date pour ce formulaire.  Cet état sera également passé à la fonction que vous avez fournie.
 
 ```js
 import { useFormState } from "react-dom";
@@ -43,44 +43,44 @@ function StatefulForm({}) {
   return (
     <form>
       {state}
-      <button formAction={formAction}>Increment</button>
+      <button formAction={formAction}>Incrémenter</button>
     </form>
   )
 }
 ```
 
-The form state is the value returned by the action when the form was last submitted. If the form has not yet been submitted, it is the initial state that you pass.
+L'état de formulaire est déterminé par la valeur renvoyée par l'action lors du dernier envoi en date du formulaire. Si le formulaire n'a pas encore été envoyé, il équivaut à l'état initial que vous avez fourni.
 
-If used with a server action, `useFormState` allows the server's response from submitting the form to be shown even before hydration has completed.
+Lorsque vous l'utilisez dans une action serveur, `useFormState` permet d'afficher la réponse du serveur pour l'envoi du formulaire avant même que l'hydratation ne soit terminée.
 
-[See more examples below.](#usage)
+[Voir d'autres exemples plus bas](#usage).
 
-#### Parameters {/*parameters*/}
+#### Paramètres {/*parameters*/}
 
-* `fn`: The function to be called when the form is submitted or button pressed. When the function is called, it will receive the previous state of the form (initially the `initialState` that you pass, subsequently its previous return value) as its initial argument, followed by the arguments that a form action normally receives.
-* `initialState`: The value you want the state to be initially. It can be any serializable value. This argument is ignored after the action is first invoked.
+* `fn` : la fonction à appeler lorsque le formulaire est envoyé.  Lorsque la fonction est appelée, elle reçoit comme premier argument l'état précédent du formulaire (le `initialState` que vous avez fourni pour le premier appel, puis, pour les appels ultérieurs, la valeur précédemment renvoyée), suivi par les arguments normalement acceptés par une fonction d'action de formulaire.
+* `initialState` : la valeur initiale que vous souhaitez pour votre état.  Il peut s'agir de n'importe quelle valeur sérialisable.  Cet argument est ignoré après l'appel initial de l'action.
 
 {/* TODO T164397693: link to serializable values docs once it exists */}
 
-#### Returns {/*returns*/}
+#### Valeur renvoyée {/*returns*/}
 
-`useFormState` returns an array with exactly two values:
+`useFormState` renvoie un tableau avec exactement deux valeurs :
 
-1. The current state. During the first render, it will match the `initialState` you have passed. After the action is invoked, it will match the value returned by the action.
-2. A new action that you can pass as the `action` prop to your `form` component or `formAction` prop to any `button` component within the form.
+1. L'état courant.  Lors du rendu initial, il s'agira du `initialState` que vous avez passé. Après que l'action aura été invoquée, il correspondra à la valeur renvoyée par l'action.
+2. Une nouvelle action que vous pouvez passer comme prop `action` à votre composant `form`, ou comme prop `formAction` à tout composant `button` au sein du formulaire.
 
-#### Caveats {/*caveats*/}
+#### Limitations {/*caveats*/}
 
-* When used with a framework that supports React Server Components, `useFormState` lets you make forms interactive before JavaScript has executed on the client. When used without Server Components, it is equivalent to component local state.
-* The function passed to `useFormState` receives an extra argument, the previous or initial state, as its first argument. This makes its signature different than if it were used directly as a form action without using `useFormState`.
+* Lorsque vous utilisez un framework prenant en charge les React Server Components, `useFormState` vous permet de rendre les formulaires interactifs avant même que JavaScript ne soit exécuté côté client.  Si vous l'utilisez hors des Server Components, il est équivalent à un état local de composant.
+* La fonction passée à `useFormState` reçoit un premier argument supplémentaire : l'état précédent ou initial. Sa signature est donc différente de celles des fonctions d'action de formulaire utilisées directement par vos formulaires, sans recours à `useFormState`.
 
 ---
 
-## Usage {/*usage*/}
+## Utilisation {/*usage*/}
 
-### Using information returned by a form action {/*using-information-returned-by-a-form-action*/}
+### Utiliser les informations renvoyées par une action de formulaire {/*using-information-returned-by-a-form-action*/}
 
-Call `useFormState` at the top level of your component to access the return value of an action from the last time a form was submitted.
+Appelez `useFormState` au niveau racine de votre composant pour accéder à la valeur renvoyée par l'action lors du dernier envoi du formulaire.
 
 ```js [[1, 5, "state"], [2, 5, "formAction"], [3, 5, "action"], [4, 5, "null"], [2, 8, "formAction"]]
 import { useFormState } from 'react-dom';
@@ -97,27 +97,27 @@ function MyComponent() {
 }
 ```
 
-`useFormState` returns an array with exactly two items:
+`useFormState` renvoie un tableau avec exactement deux valeurs :
 
-1. The <CodeStep step={1}>current state</CodeStep> of the form, which is initially set to the <CodeStep step={4}>initial state</CodeStep> you provided, and after the form is submitted is set to the return value of the <CodeStep step={3}>action</CodeStep> you provided.
-2. A <CodeStep step={2}>new action</CodeStep> that you pass to `<form>` as its `action` prop.
+1. <CodeStep step={1}>L'état courant</CodeStep> du formulaire, qui sera au départ <CodeStep step={4}>l'état initial</CodeStep> que vous aurez fourni, puis une fois le formulaire envoyé, vaudra la valeur de retour de <CodeStep step={3}>l'action</CodeStep> que vous aurez passée.
+2. Une <CodeStep step={2}>nouvelle action</CodeStep> que vous pouvez passer comme prop `action` à votre `form`.
 
-When the form is submitted, the <CodeStep step={3}>action</CodeStep> function that you provided will be called. Its return value will become the new <CodeStep step={1}>current state</CodeStep> of the form.
+Lorsque le formulaire sera envoyé, la fonction <CodeStep step={3}>d'action</CodeStep> que vous aurez fournie sera appelée.  Sa valeur de retour deviendra le nouvel <CodeStep step={1}>état courant</CodeStep> du formulaire.
 
-The <CodeStep step={3}>action</CodeStep> that you provide will also receive a new first argument, namely the <CodeStep step={1}>current state</CodeStep> of the form. The first time the form is submitted, this will be the <CodeStep step={4}>initial state</CodeStep> you provided, while with subsequent submissions, it will be the return value from the last time the action was called. The rest of the arguments are the same as if `useFormState` had not been used
+<CodeStep step={3}>L'action</CodeStep> que vous aurez fournie recevra par ailleurs un premier argument supplémentaire, à savoir <CodeStep step={1}>l'état courant</CodeStep> du formulaire. Lors du premier envoi du formulaire, il s'agira de <CodeStep step={4}>l'état initial</CodeStep> que vous aurez fourni, alors que pour les envois ultérieurs, ce sera la valeur renvoyée par le dernier appel en date de l'action. Le reste des arguments est identique à une utilisation de l'action sans `useFormState`.
 
 ```js [[3, 1, "action"], [1, 1, "currentState"]]
 function action(currentState, formData) {
   // ...
-  return 'next state';
+  return 'prochain état';
 }
 ```
 
-<Recipes titleText="Display information after submitting a form" titleId="display-information-after-submitting-a-form">
+<Recipes titleText="Afficher des informations suite à l’envoi d'un formulaire" titleId="display-information-after-submitting-a-form">
 
-#### Display form errors {/*display-form-errors*/}
+#### Afficher des erreurs de formulaire {/*display-form-errors*/}
 
-To display messages such as an error message or toast that's returned by a server action, wrap the action in a call to `useFormState`.
+Pour afficher des messages tels qu'un message d'erreur ou une notification renvoyés par une action serveur, enrobez l'action dans un appel à `useFormState`.
 
 <Sandpack>
 
@@ -132,7 +132,7 @@ function AddToCartForm({itemID, itemTitle}) {
     <form action={formAction}>
       <h2>{itemTitle}</h2>
       <input type="hidden" name="itemID" value={itemID} />
-      <button type="submit">Add to Cart</button>
+      <button type="submit">Ajouter au panier</button>
       {message}
     </form>
   );
@@ -154,9 +154,9 @@ export default function App() {
 export async function addToCart(prevState, queryData) {
   const itemID = queryData.get('itemID');
   if (itemID === "1") {
-    return "Added to cart";
+    return "Ajouté au panier";
   } else {
-    return "Couldn't add to cart: the item is sold out.";
+    return "Impossible d’ajouter au panier : ce titre est épuisé.";
   }
 }
 ```
@@ -188,9 +188,9 @@ form button {
 
 <Solution />
 
-#### Display structured information after submitting a form {/*display-structured-information-after-submitting-a-form*/}
+#### Afficher des données structurées suite à l'envoi d'un formulaire {/*display-structured-information-after-submitting-a-form*/}
 
-The return value from a server action can be any serializable value. For example, it could be an object that includes a boolean indicating whether the action was successful, an error message, or updated information.
+La valeur renvoyée par une action serveur peut être n'importe quelle valeur sérialisable. Il peut par exemple s'agir d'un objet avec un booléen indiquant si l'action a réussi, un message d'erreur, ou des informations mises à jour.
 
 <Sandpack>
 
@@ -205,15 +205,15 @@ function AddToCartForm({itemID, itemTitle}) {
     <form action={formAction}>
       <h2>{itemTitle}</h2>
       <input type="hidden" name="itemID" value={itemID} />
-      <button type="submit">Add to Cart</button>
+      <button type="submit">Ajouter au panier</button>
       {formState?.success &&
         <div className="toast">
-          Added to cart! Your cart now has {formState.cartSize} items.
+          Ajouté ! Votre panier comporte désormais {formState.cartSize} éléments.
         </div>
       }
       {formState?.success === false &&
         <div className="error">
-          Failed to add to cart: {formState.message}
+          L’ajout a échoué : {formState.message}
         </div>
       }
     </form>
@@ -243,7 +243,7 @@ export async function addToCart(prevState, queryData) {
   } else {
     return {
       success: false,
-      message: "The item is sold out.",
+      message: "Ce titre est épuisé.",
     };
   }
 }
@@ -278,11 +278,11 @@ form button {
 
 </Recipes>
 
-## Troubleshooting {/*troubleshooting*/}
+## Dépannage {/*troubleshooting*/}
 
-### My action can no longer read the submitted form data {/*my-action-can-no-longer-read-the-submitted-form-data*/}
+### Mon action n'arrive plus à lire les données envoyées par le formulaire {/*my-action-can-no-longer-read-the-submitted-form-data*/}
 
-When you wrap an action with `useFormState`, it gets an extra argument *as its first argument*. The submitted form data is therefore its *second* argument instead of its first as it would usually be. The new first argument that gets added is the current state of the form.
+Lorsque vous enrobez une action avec `useFormState`, elle reçoit un *premier argument* supplémentaire. Les données envoyées par le formulaire sont donc présentes comme *second* argument, plutôt qu'en première position comme en temps normal.  Le premier argument ainsi injecté contient l'état actuel du formulaire.
 
 ```js
 function action(currentState, formData) {