React 19 Actions en production : formulaires sans boilerplate | maxpaths Blog

Introduction

Les formulaires React classiques accumulent vite du boilerplate :useState pour chaque champ, un pending local, une gestion d erreurs repetitive, puis un try/catch par soumission. React 19 propose une alternative plus directe avec les Actions et trois hooks complementaires.

Le probleme recurrent

Les formulaires finissent par dupliquer les memes patterns partout.

Etat du bouton soumis a la main.
Erreurs reseau recopiees dans chaque composant.
Optimistic UI difficile a generaliser.

Pourquoi les Actions changent la donne

Une Action est une fonction async associee directement a un formulaire. React orchestre le cycle de soumission et expose l etat viauseActionState et useFormStatus. Resultat : vous ecrivez moins de glue-code et vous concentrez sur la logique metier.

Formulaire classique

Gestion manuelle des states et du cycle async

Avantages

Controle total
Compatible partout

Inconvenients

Boilerplate
Erreurs repetitives
Pending fragile

Cas d'usage

•Legacy
•Formulaires tres simples

React 19 Actions

Action + hooks pour etat, pending et erreurs

Avantages

Moins de code
Etat centralise
Optimistic UI simple

Inconvenients

Nouveaux patterns a apprendre

Cas d'usage

•Nouveaux projets
•Formulaires critiques

Formulaire classique	React 19 Actions
Gestion manuelle des states et du cycle async	Action + hooks pour etat, pending et erreurs
Avantages Controle total Compatible partout	Avantages Moins de code Etat centralise Optimistic UI simple
Inconvenients Boilerplate Erreurs repetitives Pending fragile	Inconvenients Nouveaux patterns a apprendre
Cas d'usage •Legacy •Formulaires tres simples	Cas d'usage •Nouveaux projets •Formulaires critiques

useActionState : etat et erreurs sans glue-code

useActionState encapsule le resultat d une Action et l etat associe. Vous centralisez les erreurs et les reponses sans multiplier les variables locales.

order-form.tsxtsx

1// useActionState : centraliser resultat + erreurs
2import { useActionState } from 'react';
3
4type ActionState = {
5  ok: boolean;
6  message: string;
7};
8
9async function createOrderAction(
10  _prevState: ActionState,
11  formData: FormData
12): Promise<ActionState> {
13  const amountCents = Number(formData.get('amountCents'));
14
15  if (!Number.isFinite(amountCents) || amountCents < 100) {
16    return { ok: false, message: 'Montant minimum: 1,00 EUR' };
17  }
18
19  await fakeApiCall(amountCents);
20
21  return { ok: true, message: 'Commande creee' };
22}
23
24export function OrderForm() {
25  const [state, action] = useActionState(createOrderAction, {
26    ok: false,
27    message: '',
28  });
29
30  return (
31    <form action={action}>
32      <input name="amountCents" placeholder="12900" />
33      <button type="submit">Valider</button>
34      {state.message && <p>{state.message}</p>}
35    </form>
36  );
37}

useFormStatus : des boutons vraiment fiables

useFormStatus expose l etat du formulaire le plus proche. Vos boutons se desactivent automatiquement pendant la soumission, sans prop drilling.

submit-button.tsxtsx

1import { useFormStatus } from 'react-dom';
2
3export function SubmitButton() {
4  const { pending } = useFormStatus();
5
6  return (
7    <button type="submit" disabled={pending}>
8      {pending ? 'Envoi...' : 'Creer la commande'}
9    </button>
10  );
11}
12
13export function OrderForm({ action }: { action: (fd: FormData) => void }) {
14  return (
15    <form action={action}>
16      <input name="amountCents" />
17      <SubmitButton />
18    </form>
19  );
20}

useOptimistic : UI immediate sans tricher

useOptimistic permet d afficher un nouvel element avant la reponse serveur. Ideal pour commentaires, checklists, ou items de commandes.

comments.tsxtsx

1import { useOptimistic, useState } from 'react';
2
3type Comment = { id: string; body: string; optimistic?: boolean };
4
5export function Comments() {
6  const [comments, setComments] = useState<Comment[]>([]);
7  const [optimisticComments, addOptimistic] = useOptimistic(
8    comments,
9    (state, newComment: Comment) => [...state, newComment]
10  );
11
12  async function submit(body: string) {
13    const temp = { id: crypto.randomUUID(), body, optimistic: true };
14    addOptimistic(temp);
15
16    const saved = await saveComment(body);
17    setComments((prev) => prev.filter((c) => c.id !== temp.id).concat(saved));
18  }
19
20  return (
21    <div>
22      {optimisticComments.map((comment) => (
23        <p key={comment.id} className={comment.optimistic ? 'opacity-60' : ''}>
24          {comment.body}
25        </p>
26      ))}
27    </div>
28  );
29}

Checklist production

Points a valider avant mise en prod

Les Actions reduisent le code, pas vos exigences de qualite.

Validation input cote client et serveur.
Gestion d erreurs centralisee (messages clairs).
Idempotence sur les actions critiques.
Logging et tracing par action.
Fallback si le formulaire echoue (retry, support).

Conclusion

React 19 Actions rend les formulaires plus previsible et plus concis. Combinez useActionState pour l etat, useFormStatuspour le pending et useOptimistic pour l experience. Vous reduisez le boilerplate sans perdre en controle.

Introduction

Le probleme recurrent

Les formulaires finissent par dupliquer les memes patterns partout.

Etat du bouton soumis a la main.
Erreurs reseau recopiees dans chaque composant.
Optimistic UI difficile a generaliser.

Pourquoi les Actions changent la donne

Formulaire classique

Gestion manuelle des states et du cycle async

Avantages

Controle total
Compatible partout

Inconvenients

Boilerplate
Erreurs repetitives
Pending fragile

Cas d'usage

•Legacy
•Formulaires tres simples

React 19 Actions

Action + hooks pour etat, pending et erreurs

Avantages

Moins de code
Etat centralise
Optimistic UI simple

Inconvenients

Nouveaux patterns a apprendre

Cas d'usage

•Nouveaux projets
•Formulaires critiques

Formulaire classique	React 19 Actions
Gestion manuelle des states et du cycle async	Action + hooks pour etat, pending et erreurs
Avantages Controle total Compatible partout	Avantages Moins de code Etat centralise Optimistic UI simple
Inconvenients Boilerplate Erreurs repetitives Pending fragile	Inconvenients Nouveaux patterns a apprendre
Cas d'usage •Legacy •Formulaires tres simples	Cas d'usage •Nouveaux projets •Formulaires critiques

useActionState : etat et erreurs sans glue-code

useActionState encapsule le resultat d une Action et l etat associe. Vous centralisez les erreurs et les reponses sans multiplier les variables locales.

order-form.tsxtsx

1// useActionState : centraliser resultat + erreurs
2import { useActionState } from 'react';
3
4type ActionState = {
5  ok: boolean;
6  message: string;
7};
8
9async function createOrderAction(
10  _prevState: ActionState,
11  formData: FormData
12): Promise<ActionState> {
13  const amountCents = Number(formData.get('amountCents'));
14
15  if (!Number.isFinite(amountCents) || amountCents < 100) {
16    return { ok: false, message: 'Montant minimum: 1,00 EUR' };
17  }
18
19  await fakeApiCall(amountCents);
20
21  return { ok: true, message: 'Commande creee' };
22}
23
24export function OrderForm() {
25  const [state, action] = useActionState(createOrderAction, {
26    ok: false,
27    message: '',
28  });
29
30  return (
31    <form action={action}>
32      <input name="amountCents" placeholder="12900" />
33      <button type="submit">Valider</button>
34      {state.message && <p>{state.message}</p>}
35    </form>
36  );
37}

useFormStatus : des boutons vraiment fiables

useFormStatus expose l etat du formulaire le plus proche. Vos boutons se desactivent automatiquement pendant la soumission, sans prop drilling.

submit-button.tsxtsx

1import { useFormStatus } from 'react-dom';
2
3export function SubmitButton() {
4  const { pending } = useFormStatus();
5
6  return (
7    <button type="submit" disabled={pending}>
8      {pending ? 'Envoi...' : 'Creer la commande'}
9    </button>
10  );
11}
12
13export function OrderForm({ action }: { action: (fd: FormData) => void }) {
14  return (
15    <form action={action}>
16      <input name="amountCents" />
17      <SubmitButton />
18    </form>
19  );
20}

useOptimistic : UI immediate sans tricher

useOptimistic permet d afficher un nouvel element avant la reponse serveur. Ideal pour commentaires, checklists, ou items de commandes.

comments.tsxtsx

1import { useOptimistic, useState } from 'react';
2
3type Comment = { id: string; body: string; optimistic?: boolean };
4
5export function Comments() {
6  const [comments, setComments] = useState<Comment[]>([]);
7  const [optimisticComments, addOptimistic] = useOptimistic(
8    comments,
9    (state, newComment: Comment) => [...state, newComment]
10  );
11
12  async function submit(body: string) {
13    const temp = { id: crypto.randomUUID(), body, optimistic: true };
14    addOptimistic(temp);
15
16    const saved = await saveComment(body);
17    setComments((prev) => prev.filter((c) => c.id !== temp.id).concat(saved));
18  }
19
20  return (
21    <div>
22      {optimisticComments.map((comment) => (
23        <p key={comment.id} className={comment.optimistic ? 'opacity-60' : ''}>
24          {comment.body}
25        </p>
26      ))}
27    </div>
28  );
29}

Checklist production

Points a valider avant mise en prod

Les Actions reduisent le code, pas vos exigences de qualite.

Validation input cote client et serveur.
Gestion d erreurs centralisee (messages clairs).
Idempotence sur les actions critiques.
Logging et tracing par action.
Fallback si le formulaire echoue (retry, support).

React 19 Actions en production : moins de boilerplate pour les formulaires

Introduction

Le probleme recurrent

Pourquoi les Actions changent la donne

useActionState : etat et erreurs sans glue-code

useFormStatus : des boutons vraiment fiables

useOptimistic : UI immediate sans tricher

Checklist production

Points a valider avant mise en prod

Conclusion

React 19 Actions en production : moins de boilerplate pour les formulaires

Introduction

Le probleme recurrent

Pourquoi les Actions changent la donne

useActionState : etat et erreurs sans glue-code

useFormStatus : des boutons vraiment fiables

useOptimistic : UI immediate sans tricher

Checklist production

Points a valider avant mise en prod

Conclusion