Conclusion module formulaires

Ce que tu retiens vraiment de ce module

Félicitations ! Tu viens de parcourir l’intégralité du module dédié aux formulaires dans React Router 7. Au-delà de la simple technique, voici les idées maîtresses que tu dois impérativement garder en tête :

1. Expérience développeur hors-norme
   • <Form> + duo loader / action = cycle automatique : loader → action → loader, sans fetch manuel, sans useEffect.
   • Le code reste lisible, sans état local parasite ni calls d’API dispersés.
2. Expérience utilisateur premium
   • Aucun « flash » entre deux soumissions, pas d’écran blanc ni erreur 500 incontrôlée.
   • Validation temps réel : l’utilisateur sait immédiatement pourquoi son champ est invalide et où corriger.
3. Sécurité & robustesse
   • Les règles Zod bloquent toutes les entrées invalides côté serveur ; un cURL ou Postman ne passera pas.
   • Pas de base de données corrompue, pas d’exception inattendue.
4. Conform & Zod = un seul langage métier
   • Un schéma unique pour le client et le serveur.
   • Génération auto des required, minLength, focus sur le premier champ fautif, messages d’erreur cohérents.
5. Hooks avancés
   • useFetcher pour les interactions sans navigation (autosave, boutons « Like »).
   • useSubmit quand tu transformes un composant custom en déclencheur de formulaire.

Du prototype à la vraie vie : la suite du programme

Le module a volontairement utilisé une “base de données en mémoire” pour te laisser te concentrer sur la mécanique des formulaires. Mais dans une application production :

• les données persistent dans Postgres, MySQL ou Mongo ;
• tu dois gérer l’authentification, protéger certaines routes, stocker un cookie de session, etc.

C’est exactement ce que nous attaquons dans le prochain module :

1
# Objectifs du chapitre suivant
2
✅ brancher une vraie DB (Prisma + SQLite pour débuter)
3
✅ implémenter l'inscription / connexion
4
✅ créer des routes protégées et des redirects automatiques

Grâce à tout ce que tu viens d’apprendre — validation partagée, cycle loader/action, gestion d’erreurs fine — tu verras que connecter un vrai back-end devient presque trivial.

Récap technique express

Astuce : garde toujours ce tableau dans un coin de ton IDE ; il te sert de pense-bête sur les couples « problème / solution ».

Petit coup d’œil au code final

1
import { Form, useActionData, useLoaderData } from "react-router"
2
import {
3
  useForm, getFormProps, getInputProps, getZodConstraint,
4
} from "@conform-to/react"
5
import { parseWithZod } from "@conform-to/zod"
6
import { userActionSchema } from "~/schemas/user"
7

8
export async function action({ request }) {
9
  const submission = await parseWithZod(request.formData(), {
10
    schema: userActionSchema,
11
  })
12
  if (submission.status !== "success") {
13
    return data({ result: submission.reply() }, { status: 400 })
14
  }
15
  /* mutation */
16
}
17

18
export default function UserForm() {
19
  const loaderData  = useLoaderData<typeof loader>()
20
  const actionData  = useActionData<typeof action>()
21
  const [form, fields] = useForm({
22
    id: "user-form",
23
    lastResult: actionData?.result,
24
    constraint: getZodConstraint(userActionSchema),
25
    onValidate: ({ formData }) =>
26
      parseWithZod(formData, { schema: userActionSchema }),
27
    defaultValue: loaderData.defaultValue,
28
  })
29

30
  return (
31
    <Form method="POST" {...getFormProps(form)} className="space-y-4">
32
      <input {...getInputProps(fields.action, { type: "hidden" })} />
33
      {/* …autres champs */}
34
      <button disabled={form.submission?.pending} className="btn-primary">
35
        {form.submission?.pending ? "Sauvegarde…" : "Enregistrer"}
36
      </button>
37
    </Form>
38
  )
39
}

Observe : aucun useState, pas de try/catch, zéro duplication entre client et serveur — et pourtant le formulaire est :

• accessible (ARIA),
• validé à deux niveaux,
• typé de bout en bout.

À tout de suite dans le module Authentification : on branche la base de données, on sécurise les routes, et tu verras que les fondations posées ici feront toute la différence.