React useFormStatus: Mestre tilstanden for skjemainnsending

Skjemaer er ryggraden i utallige webapplikasjoner, og fungerer som den primære måten for brukere å samhandle med og levere data til servere. Å sikre en smidig og informativ prosess for skjemainnsending er avgjørende for å skape positive brukeropplevelser. React 18 introduserte en kraftig hook kalt useFormStatus, designet for å forenkle håndteringen av tilstanden for skjemainnsending. Denne guiden gir en omfattende oversikt over useFormStatus, og utforsker dens funksjoner, bruksområder og beste praksis for å bygge tilgjengelige og engasjerende skjemaer for et globalt publikum.

Hva er React useFormStatus?

useFormStatus er en React Hook som gir informasjon om innsendingsstatusen til et skjema. Den er designet for å fungere sømløst med serverhandlinger (server actions), en funksjon som lar deg utføre logikk på serversiden direkte fra dine React-komponenter. Hooken returnerer et objekt som inneholder informasjon om skjemaets ventestatus, data og eventuelle feil som oppstod under innsendingen. Denne informasjonen lar deg gi sanntids-tilbakemelding til brukere, som å vise lasteindikatorer, deaktivere skjemaelementer og vise feilmeldinger.

Forståelse av serverhandlinger

Før vi dykker ned i useFormStatus, er det viktig å forstå serverhandlinger. Serverhandlinger er asynkrone funksjoner som kjører på serveren og kan kalles direkte fra React-komponenter. De defineres ved å bruke 'use server'-direktivet øverst i filen. Serverhandlinger brukes ofte til oppgaver som:

• Sende skjemadata til en database
• Autentisere brukere
• Behandle betalinger
• Sende e-poster

Her er et enkelt eksempel på en serverhandling:

// actions.js
'use server';

export async function submitForm(formData) {
  // Simuler en forsinkelse for å etterligne en serverforespørsel
  await new Promise(resolve => setTimeout(resolve, 2000));

  const name = formData.get('name');
  const email = formData.get('email');

  if (!name || !email) {
    return { message: 'Vennligst fyll ut alle feltene.' };
  }

  // Simuler vellykket innsending
  return { message: `Skjemaet ble sendt inn for ${name}!` };
}

Denne handlingen tar imot skjemadata, simulerer en forsinkelse, og returnerer deretter en suksess- eller feilmelding. 'use server'-direktivet forteller React at denne funksjonen skal utføres på serveren.

Hvordan useFormStatus fungerer

useFormStatus-hooken brukes i en komponent som rendrer et skjema. Den må brukes inne i et <form>-element som bruker `action`-propen med den importerte serverhandlingen. Hooken returnerer et objekt med følgende egenskaper:

• pending: En boolsk verdi som indikerer om skjemaet for øyeblikket sendes inn.
• data: Dataene som ble sendt inn med skjemaet. Dette vil være null hvis skjemaet ikke er sendt inn ennå.
• method: HTTP-metoden som ble brukt til å sende inn skjemaet (f.eks. "POST", "GET").
• action: Serverhandlingsfunksjonen som er knyttet til skjemaet.
• error: Et feilobjekt hvis skjemainnsendingen mislyktes. Dette vil være null hvis innsendingen var vellykket eller ennå ikke er forsøkt. Viktig: Feilen blir ikke automatisk kastet. Serverhandlingen må eksplisitt returnere feilobjektet eller kaste det.

Her er et eksempel på hvordan du bruker useFormStatus i en React-komponent:

'use client'
import { useFormStatus } from 'react-dom';
import { submitForm } from './actions';

function MyForm() {
  const { pending, data, error, action } = useFormStatus();

  return (
    <form action={submitForm}>
      <label htmlFor="name">Navn:</label>
      <input type="text" id="name" name="name" disabled={pending} />
      <label htmlFor="email">E-post:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? 'Sender inn...' : 'Send inn'}
      </button>
      {error && <p style={{ color: 'red' }}>Feil: {error.message}</p>}
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

export default MyForm;

I dette eksempelet:

• Vi importerer useFormStatus fra 'react-dom' og serverhandlingen submitForm fra ./actions.
• Vi bruker useFormStatus for å få den nåværende statusen for skjemainnsendingen.
• Vi deaktiverer input-feltene og send-inn-knappen mens skjemaet er i ventemodus (pending).
• Vi viser en lastemelding mens skjemaet er i ventemodus.
• Vi viser en feilmelding hvis skjemainnsendingen mislykkes.
• Vi viser en suksessmelding hvis skjemainnsendingen lykkes.

Fordeler med å bruke useFormStatus

useFormStatus tilbyr flere fordeler for håndtering av tilstanden for skjemainnsending:

• Forenklet tilstandshåndtering: Det eliminerer behovet for å manuelt håndtere lastestatus, feilstatus og skjemadata.
• Forbedret brukeropplevelse: Det lar deg gi sanntids-tilbakemelding til brukere, noe som gjør skjemainnsendingsprosessen mer intuitiv og engasjerende.
• Forbedret tilgjengelighet: Ved å deaktivere skjemaelementer under innsending, forhindrer du brukere i å sende inn skjemaet flere ganger ved et uhell.
• Sømløs integrasjon med serverhandlinger: Det er spesifikt designet for å fungere med serverhandlinger, noe som gir en smidig og effektiv måte å håndtere skjemainnsendinger på.
• Redusert standardkode (boilerplate): Reduserer mengden kode som trengs for å håndtere skjemainnsendinger.

Beste praksis for bruk av useFormStatus

For å maksimere fordelene med useFormStatus, bør du vurdere følgende beste praksis:

• Gi tydelig tilbakemelding: Bruk pending-tilstanden til å vise en lasteindikator eller deaktivere skjemaelementer for å forhindre flere innsendinger. Dette kan være en enkel spinner, en fremdriftslinje eller en tekstmelding som "Sender inn...". Vurder tilgjengelighet og sørg for at lasteindikatoren blir korrekt annonsert til skjermlesere.
• Håndter feil på en elegant måte: Vis informative feilmeldinger for å hjelpe brukere med å forstå hva som gikk galt og hvordan de kan fikse det. Tilpass feilmeldingene til brukerens språk og kulturelle kontekst. Unngå teknisk sjargong og gi klar, handlingsrettet veiledning.
• Valider data på serveren: Valider alltid skjemadata på serveren for å forhindre ondsinnet input og sikre dataintegritet. Validering på serversiden er avgjørende for sikkerhet og datakvalitet. Vurder å implementere internasjonalisering (i18n) for valideringsmeldinger på serversiden.
• Bruk progressiv forbedring: Sørg for at skjemaet ditt fungerer selv om JavaScript er deaktivert. Dette innebærer å bruke standard HTML-skjemaelementer og sende inn skjemaet til et endepunkt på serversiden. Deretter kan du progressivt forbedre skjemaet med JavaScript for å gi en rikere brukeropplevelse.
• Vurder tilgjengelighet: Bruk ARIA-attributter for å gjøre skjemaet ditt tilgjengelig for brukere med nedsatt funksjonsevne. For eksempel, bruk aria-describedby for å knytte feilmeldinger til de tilsvarende skjemafeltene. Følg retningslinjene for tilgjengelighet på webinnhold (WCAG) for å sikre at skjemaet ditt er brukbart for alle.
• Optimaliser ytelsen: Unngå unødvendige re-rendringer ved å bruke React.memo eller andre optimaliseringsteknikker. Overvåk ytelsen til skjemaet ditt og identifiser eventuelle flaskehalser. Vurder å laste inn komponenter ved behov (lazy-loading) eller bruke kodesplitting for å forbedre den innledende lastetiden.
• Implementer ratebegrensning: Beskytt serveren din mot misbruk ved å implementere ratebegrensning. Dette vil forhindre brukere i å sende inn skjemaet for mange ganger i løpet av en kort periode. Vurder å bruke en tjeneste som Cloudflare eller Akamai for å håndtere ratebegrensning på kanten (edge).

Bruksområder for useFormStatus

useFormStatus kan brukes i en rekke scenarier:

• Kontaktskjemaer: Gir tilbakemelding under innsending og håndterer potensielle feil.
• Innloggings-/registreringsskjemaer: Indikerer lastestatus under autentisering og viser feilmeldinger for ugyldige legitimasjonsbeskrivelser.
• Kasseskjemaer for e-handel: Viser lasteindikatorer under betalingsbehandling og håndterer feil relatert til ugyldig kredittkortinformasjon eller utilstrekkelige midler. Vurder å integrere med betalingsgatewayer som støtter flere valutaer og språk.
• Skjemaer for dataregistrering: Deaktiverer skjemaelementer under innsending for å forhindre utilsiktet duplisering av data.
• Søkeskjemaer: Viser en lasteindikator mens søkeresultater hentes.
• Innstillingssider: Gir visuelle signaler når innstillinger lagres.
• Spørreundersøkelser og quizer: Håndterer innsending av svar og viser tilbakemelding.

Håndtering av internasjonalisering (i18n)

Når du bygger skjemaer for et globalt publikum, er internasjonalisering (i18n) avgjørende. Slik håndterer du i18n når du bruker useFormStatus:

• Oversett feilmeldinger: Lagre feilmeldinger i en oversettelsesfil og bruk et bibliotek som react-intl eller i18next for å vise den riktige meldingen basert på brukerens locale. Sørg for at feilmeldingene er klare, konsise og kulturelt passende.
• Formater tall og datoer: Bruk Intl API-et for å formatere tall og datoer i henhold til brukerens locale. Dette vil sikre at tall og datoer vises i riktig format for deres region.
• Håndter forskjellige dato- og tidsformater: Tilby input-felt som støtter forskjellige dato- og tidsformater. Bruk et bibliotek som react-datepicker for å tilby en lokalisert datovelger.
• Støtt språk som skrives fra høyre til venstre (RTL): Sørg for at skjemaoppsettet ditt fungerer korrekt for RTL-språk som arabisk og hebraisk. Bruk logiske egenskaper i CSS for å håndtere layoutjusteringer.
• Bruk et lokaliseringsbibliotek: Benytt et robust i18n-bibliotek for å håndtere oversettelser og locale-spesifikk formatering.

Eksempel med i18next:

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import en from './locales/en.json';
import fr from './locales/fr.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: en },
      fr: { translation: fr },
    },
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false, // react already safes from xss
    },
  });

export default i18n;

// MyForm.js

import { useTranslation } from 'react-i18next';

function MyForm() {
  const { t } = useTranslation();
  const { pending, data, error, action } = useFormStatus();

  return (
    <form action={submitForm}>
      <label htmlFor="name">{t('name')}:</label>
      <input type="text" id="name" name="name" disabled={pending} />
      <label htmlFor="email">{t('email')}:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? t('submitting') : t('submit')}
      </button>
      {error && <p style={{ color: 'red' }}>{t('error')}: {t(error.message)}</p>}
      {data && data.message && <p style={{ color: 'green' }}>{t(data.message)}</p>}
    </form>
  );
}

export default MyForm;

Hensyn til tilgjengelighet

Å sikre tilgjengelighet er avgjørende når man bygger skjemaer. Slik gjør du skjemaene dine mer tilgjengelige når du bruker useFormStatus:

• Bruk ARIA-attributter: Bruk ARIA-attributter som aria-invalid, aria-describedby og aria-live for å gi semantisk informasjon til hjelpemiddelteknologi. For eksempel, bruk aria-invalid="true" på input-felt med valideringsfeil og bruk aria-describedby for å knytte feilmeldinger til de tilsvarende feltene. Bruk aria-live="polite" eller aria-live="assertive" på elementer som viser dynamisk innhold, som lasteindikatorer og feilmeldinger.
• Sørg for tastaturnavigasjon: Sørg for at brukere kan navigere i skjemaet ved hjelp av tastaturet. Bruk tabindex-attributtet for å kontrollere rekkefølgen elementer mottar fokus i.
• Bruk semantisk HTML: Bruk semantiske HTML-elementer som <label>, <input>, <button> og <fieldset> for å gi struktur og mening til skjemaet ditt.
• Gi tydelige etiketter: Bruk klare og beskrivende etiketter for alle skjemafelt. Knytt etiketter til deres tilsvarende input-felt ved hjelp av for-attributtet.
• Bruk tilstrekkelig kontrast: Sørg for at det er tilstrekkelig kontrast mellom tekst- og bakgrunnsfarger. Bruk en fargekontrastsjekker for å verifisere at fargene dine oppfyller retningslinjene for tilgjengelighet.
• Test med hjelpemiddelteknologi: Test skjemaet ditt med hjelpemiddelteknologi som skjermlesere for å sikre at det er brukbart for personer med nedsatt funksjonsevne.

Eksempel med ARIA-attributter:

function MyForm() {
  const { pending, data, error, action } = useFormStatus();

  return (
    <form action={submitForm}>
      <label htmlFor="name">Navn:</label>
      <input
        type="text"
        id="name"
        name="name"
        disabled={pending}
        aria-invalid={!!error} // Indikerer om det er en feil
        aria-describedby={error ? 'name-error' : null} // Knytter til feilmelding
      />
      {error && (
        <p id="name-error" style={{ color: 'red' }} aria-live="polite">{error.message}</p>
      )}
      <label htmlFor="email">E-post:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? 'Sender inn...' : 'Send inn'}
      </button>
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

Utover grunnleggende bruk: Avanserte teknikker

Selv om den grunnleggende bruken av useFormStatus er enkel, kan flere avanserte teknikker forbedre skjemainnsendingsopplevelsen ytterligere:

• Egendefinerte lasteindikatorer: I stedet for en enkel spinner, bruk en mer visuelt tiltalende og informativ lasteindikator. Dette kan være en fremdriftslinje, en egendefinert animasjon eller en melding som gir kontekst om hva som skjer i bakgrunnen. Sørg for at dine egendefinerte lasteindikatorer er tilgjengelige og har tilstrekkelig kontrast.
• Optimistiske oppdateringer: Gi umiddelbar tilbakemelding til brukeren ved å optimistisk oppdatere brukergrensesnittet før serveren svarer. Dette kan få skjemaet til å føles mer responsivt og redusere oppfattet ventetid. Vær imidlertid sikker på å håndtere potensielle feil og tilbakestille brukergrensesnittet hvis serverforespørselen mislykkes.
• Debouncing og throttling: Bruk debouncing eller throttling for å begrense antall serverforespørsler som sendes mens brukeren skriver. Dette kan forbedre ytelsen og forhindre at serveren blir overbelastet. Biblioteker som lodash tilbyr verktøy for debouncing og throttling av funksjoner.
• Betinget rendering: Render skjemaelementer betinget basert på pending-tilstanden. Dette kan være nyttig for å skjule eller deaktivere visse elementer mens skjemaet sendes inn. For eksempel kan du ønske å skjule en "Tilbakestill"-knapp mens skjemaet er i ventemodus for å forhindre at brukeren tilbakestiller skjemaet ved et uhell.
• Integrasjon med skjemavalideringsbiblioteker: Integrer useFormStatus med skjemavalideringsbiblioteker som Formik eller React Hook Form for omfattende skjemahåndtering.

Feilsøking av vanlige problemer

Når du bruker useFormStatus, kan du støte på noen vanlige problemer. Slik feilsøker du dem:

• pending-tilstanden oppdateres ikke: Sørg for at skjemaet er korrekt knyttet til serverhandlingen og at serverhandlingen er riktig definert. Verifiser at <form>-elementet har `action`-attributtet satt korrekt.
• error-tilstanden fylles ikke ut: Sørg for at serverhandlingen returnerer et feilobjekt når en feil oppstår. Serverhandlingen må eksplisitt returnere feilen, eller kaste den.
• Skjemaet sendes inn flere ganger: Deaktiver send-inn-knappen eller input-feltene mens skjemaet er i ventemodus for å forhindre flere innsendinger.
• Skjemaet sender ikke inn data: Verifiser at skjemaelementene har name-attributtet satt korrekt. Sørg for at serverhandlingen parser skjemadataene riktig.
• Ytelsesproblemer: Optimaliser koden din for å unngå unødvendige re-rendringer og redusere mengden data som behandles.

Alternativer til useFormStatus

Selv om useFormStatus er et kraftig verktøy, finnes det alternative tilnærminger for å håndtere tilstanden for skjemainnsending, spesielt i eldre React-versjoner eller når man håndterer kompleks skjemalogikk:

• Manuell tilstandshåndtering: Bruke useState og useEffect for å manuelt håndtere lastestatus, feilstatus og skjemadata. Denne tilnærmingen gir deg mer kontroll, men krever mer standardkode.
• Skjemabiblioteker: Bruke skjemabiblioteker som Formik, React Hook Form eller Final Form. Disse bibliotekene tilbyr omfattende funksjoner for skjemahåndtering, inkludert validering, innsendingshåndtering og tilstandshåndtering. Disse bibliotekene har ofte sine egne hooks eller komponenter for å håndtere innsendingsstatus.
• Redux eller Context API: Bruke Redux eller Context API for å håndtere skjemastatusen globalt. Denne tilnærmingen er egnet for komplekse skjemaer som brukes på tvers av flere komponenter.

Valget av tilnærming avhenger av kompleksiteten til skjemaet ditt og dine spesifikke krav. For enkle skjemaer er useFormStatus ofte den enkleste og mest effektive løsningen. For mer komplekse skjemaer kan et skjemabibliotek eller en global tilstandshåndteringsløsning være mer passende.

Konklusjon

useFormStatus er et verdifullt tillegg til React-økosystemet, som forenkler håndteringen av tilstanden for skjemainnsending og gjør det mulig for utviklere å skape mer engasjerende og informative brukeropplevelser. Ved å forstå funksjonene, beste praksis og bruksområdene, kan du utnytte useFormStatus til å bygge tilgjengelige, internasjonaliserte og ytelsessterke skjemaer for et globalt publikum. Å ta i bruk useFormStatus effektiviserer utviklingen, forbedrer brukerinteraksjonen og bidrar til slutt til mer robuste og brukervennlige webapplikasjoner.

Husk å prioritere tilgjengelighet, internasjonalisering og ytelse når du bygger skjemaer for et globalt publikum. Ved å følge beste praksis som er beskrevet i denne guiden, kan du lage skjemaer som er brukbare for alle, uavhengig av deres plassering eller evner. Denne tilnærmingen bidrar til en mer inkluderende og tilgjengelig web for alle brukere.