useActionState

useActionState est une des nouveautés annoncées pour la version 19 de React.

Vous allez voir qu'il va changer pas mal de choses pour vous développeur. 

‍

Je vais vous montrer dans cet exemple comment utiliser le hook useActionState avec une action de connexion serveur utilisant Prisma dans Next.

Qu'est-ce que useActionState?

useActionState est un hook React qui vous aide à mettre à jour l’état en fonction du résultat d'une action de formulaire.

Pour l'utiliser dans votre appli NextJS vous devez upgrader vers NextJS 15

npm install next@rc react@rc react-dom@rc

‍

Utiliser useActionState avec NextJS

Voici déjà la server action qui nous permettra d'exécuter du code côté serveur.

Fichier de l'Action Serveur

Créez un fichier nommé signup.ts dans votre dossier d'actions :

'use server'

import { SignupFormSchema } from '@/models'

export async function signup(state, formData) {
  // 1. Validate fields
  const validationResult = SignupFormSchema.safeParse({
    name: formData.get('name'),
    email: formData.get('email'),
    password: formData.get('password'),
  })

  if (!validationResult.success) {
    return { errors: validationResult.error.flatten().fieldErrors }
  }

  // 2. Create user
  // 3. Create session
}

‍

J'utilise zod pour mon schema de validation, mais je vous laisse le choix de la lib que vous préférez.

‍

⚠️ Attention : Veillez à bien séparer vos models et schemas dans des fichiers séparés sacahnt qu'ils sont potentielement utilisés côté client et côté serveur. 

‍

Composant React de Connexion

Créez un composant React nommé SignUpForm.js :

'use client'
import { signup } from '@/actions'
import { useActionState } from 'react'
import { infer } from "zod";

export function SignUpForm() {
  const [state, action, isPending] = useActionState<infer<typeof SignupFormSchema>(signup)
  return (
    <form action={action}>
      <input name="name" />
      {state?.errors?.name && <p>{state.errors.name}</p>}
      <input name="email" />
      {state?.errors ? email && <p>{state.errors.email}</p>}
      <input name="password" />
      {state?.errors ? password && <p>{state.errors.password}</p>}
      <button loading={isPending} disabled={isPending}>Sign up</button>
    </form>
  )
}

‍

Vous pouvez constater à quel point il est devenue simple de gérer les formulaires avec React. 

Auparavant, il fallait utiliser Tanstack query pour avoir un état de la mutation et React Hook Form pour valider le formulaire. 

‍