React 19: Gestione dei Form Rivoluzionata con useFormStatus() e Server Actions

Ciao a tutti, oggi parliamo di React 19 e delle sue nuove API che semplificano la gestione dei form. Con l’introduzione di hook come useFormStatus() e il supporto alle Server Actions, lavorare con i form in React diventa una passeggiata! Vi guiderò passo passo su come sfruttare queste novità per migliorare l’esperienza utente nei form e rendere le nostre applicazioni ancora più performanti. Vediamo tutto con esempi pratici, come piace a noi!

1. Cos’è `useFormStatus()` e quando usarlo?

Partiamo da useFormStatus(), un hook pensato per monitorare lo stato di invio dei form. Questo hook si integra perfettamente con i React Server Components e le Server Actions, permettendoci di gestire l'invio dei dati in modo diretto e trasparente.

Quando usiamo useFormStatus() in un componente, otteniamo una proprietà chiamata pending, che ci dice se il form è in fase di invio. Perfetta per quei casi in cui vogliamo disabilitare il pulsante di submit e mostrare un messaggio di caricamento per migliorare l’interfaccia.

Esempio: Disabilitare un pulsante durante l’invio

Ecco come possiamo disabilitare un pulsante di invio mentre il form è in fase di submit:

import React from 'react';
import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus(); // Otteniamo lo stato pending
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Invio in corso..." : "Invia"}
    </button>
  );
}

function ExampleForm({ submitAction }) {
  return (
    <form action={submitAction}>
      <input name="nome" type="text" placeholder="Nome" required />
      <SubmitButton />
    </form>
  );
}

export default ExampleForm;

Cosa succede qui?

pending ci dice se il form è in fase di submit.
Se pending è true, disabilitiamo il pulsante e cambiamo il testo in "Invio in corso..." per dare feedback all’utente.

2. Server Actions e `useFormStatus()`

Con React 19 arriva anche una super funzionalità: le Server Actions. In pratica, ci permettono di spostare la logica del form direttamente sul server. Basta aggiungere la direttiva 'use server' all'inizio della nostra funzione e il gioco è fatto.

Esempio: Aggiornare il profilo utente

Immaginate di voler aggiornare il profilo di un utente. Vediamo come implementare questa funzione direttamente come Server Action:

async function updateUserProfile(formData) {
  'use server'; // Dichiariamo che questa è una Server Action
  const userName = formData.get('name');
  const userEmail = formData.get('email');

  // Logica per aggiornare il profilo dell'utente
  await db.updateUser({ name: userName, email: userEmail });
}

export default function UserProfileForm() {
  return (
    <form action={updateUserProfile}>
      <input type="text" name="name" placeholder="Nome" required />
      <input type="email" name="email" placeholder="Email" required />
      <button type="submit">Aggiorna Profilo</button>
    </form>
  );
}

Cosa cambia?

La funzione updateUserProfile è una Server Action, quindi viene eseguita direttamente sul server.
Non abbiamo bisogno di chiamate AJAX o fetch, React gestisce tutto da solo!

3. Aggiornamento Ottimistico con `useOptimistic()`

Un'altra novità che ci semplifica la vita è useOptimistic(), che permette di aggiornare l’interfaccia in modo "ottimistico" prima ancora che l’operazione sia completata sul server. Immaginate di voler aggiungere un prodotto al carrello: l’utente vede subito il cambiamento nel frontend, mentre l’aggiornamento reale avviene in background.

Esempio: Aggiungere un prodotto al carrello

import { useOptimistic } from 'react';
import { addToCart } from './actions';

function AddToCartButton({ productId }) {
  const [optimisticCart, addProductToOptimisticCart] = useOptimistic([], (cart, newProduct) => {
    return [...cart, newProduct];
  });

  async function handleAddToCart() {
    addProductToOptimisticCart({ id: productId });
    await addToCart(productId);
  }

  return (
    <button onClick={handleAddToCart}>Aggiungi al Carrello</button>
  );
}

Perché è utile?

Con useOptimistic(), aggiungiamo il prodotto al carrello istantaneamente.
Solo dopo, addToCart fa partire la richiesta al server.

4. Perché usare i nuovi hook e le Server Actions in React 19?

Queste novità offrono vantaggi enormi, vediamoli:

Semplicità: useFormStatus() e useOptimistic() semplificano molto la gestione dello stato del form.
Esperienza utente migliorata: Disabilitiamo i pulsanti durante l’invio e aggiorniamo l’interfaccia in tempo reale, rendendo l’app più reattiva.
Efficienza lato server: Con le Server Actions, niente più fetch e meno codice lato client! React fa tutto da solo, e noi scriviamo meno codice.

Conclusione

React 19 ci porta a un nuovo livello di semplicità nella gestione dei form e dello stato. Con useFormStatus() e le Server Actions, rendiamo le interfacce più fluide e reattive, e tutto diventa più gestibile anche lato server. Provate subito questi nuovi hook e fatemi sapere cosa ne pensate!

1. Cos’è useFormStatus() e quando usarlo?