React useFormStatus Async Validation: Asynchrone Formulierstatusupdates

In moderne webontwikkeling zijn formulieren een cruciaal element voor gebruikersinteractie. Het waarborgen van de geldigheid van gegevens en het bieden van real-time feedback zijn van het grootste belang voor een positieve gebruikerservaring. React's useFormStatus hook, geïntroduceerd in React 18, biedt een krachtige en elegante manier om de status van formulierverzendingen te beheren, vooral bij asynchrone validatie. Dit artikel gaat dieper in op de fijne kneepjes van useFormStatus, met een focus op asynchrone validatiescenario's, praktische voorbeelden en best practices om robuuste en gebruiksvriendelijke formulieren te creëren.

De basisprincipes van useFormStatus begrijpen

De useFormStatus hook geeft informatie over de laatste formulierverzending die werd geactiveerd door een of binnen een <form>. Het retourneert een object met de volgende eigenschappen:

• pending: Een boolean die aangeeft of de formulierverzending momenteel in behandeling is.
• data: De gegevens die bij de formulierverzending horen, indien beschikbaar.
• method: De HTTP-methode die voor de formulierverzending wordt gebruikt (bijv. 'get' of 'post').
• action: De functie die wordt gebruikt als de actie van het formulier.

Hoewel ogenschijnlijk eenvoudig, wordt useFormStatus ongelooflijk waardevol bij het omgaan met asynchrone operaties, zoals het valideren van gebruikersinvoer tegen een externe server of het uitvoeren van complexe datatransformaties vóór verzending.

De noodzaak van asynchrone validatie

Traditionele synchrone validatie, waarbij controles onmiddellijk in de browser worden uitgevoerd, is vaak onvoldoende voor toepassingen in de praktijk. Overweeg deze scenario's:

• Beschikbaarheid van gebruikersnaam: Verifiëren of een gebruikersnaam al in gebruik is, vereist een database-lookup.
• E-mailverificatie: Het verzenden van een verificatie-e-mail en het bevestigen van de geldigheid ervan vereist interactie met de server.
• Betalingsverwerking: Het valideren van creditcardgegevens omvat communicatie met een betalingsgateway.
• Adres automatisch aanvullen: Het voorstellen van adresopties terwijl de gebruiker typt, vereist het aanroepen van een externe API.

Deze scenario's brengen inherent asynchrone operaties met zich mee. useFormStatus, in combinatie met asynchrone functies, stelt ons in staat om deze validaties soepel af te handelen, waarbij de gebruiker onmiddellijk feedback krijgt zonder de UI te blokkeren.

Asynchrone validatie implementeren met useFormStatus

Laten we een praktisch voorbeeld bekijken van het asynchroon valideren van de beschikbaarheid van een gebruikersnaam.

Voorbeeld: Asynchrone gebruikersnaamvalidatie

Eerst maken we een eenvoudige React-component met een formulier en een verzendknop.

            import React, { useState, useTransition } from 'react';
import { useFormStatus } from 'react-dom';

function UsernameForm() {
  const [username, setUsername] = useState('');
  const [isPending, startTransition] = useTransition();

  async function handleSubmit(formData) {
    "use server";
    const username = formData.get('username');

    // Simuleer een API-aanroep om de beschikbaarheid van de gebruikersnaam te controleren
    await new Promise(resolve => setTimeout(resolve, 1000)); // Simuleer netwerklatentie

    const isAvailable = username !== 'taken'; // Mock beschikbaarheidscontrole

    if (!isAvailable) {
      throw new Error('Gebruikersnaam is al in gebruik.');
    }

    console.log('Gebruikersnaam is beschikbaar!');
    // Voer hier de daadwerkelijke formulierverzending uit
  }

  return (
    <form action={handleSubmit}>
      <label htmlFor="username">Gebruikersnaam:</label>
      <input
        type="text"
        id="username"
        name="username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Controleren...' : 'Verzenden'}
      </button>
       <StatusComponent />
    </form>
  );
}

function StatusComponent() {
    const { pending, data, method, action } = useFormStatus();

    return (
        <p>
          {pending && "Verzenden..."}
          {data && <pre>{JSON.stringify(data)}</pre>}
        </p>
    )
}

export default UsernameForm;

            

              

Copy