React experimental_useFormState: Forbedret formularhåndtering i moderne applikationer

Formularhåndtering er et afgørende aspekt ved opbygning af interaktive og brugervenlige webapplikationer. React, med sin komponentbaserede arkitektur, giver flere måder at håndtere formularer på. Introduktionen af Server Actions og efterfølgende forbedringer som experimental_useFormState revolutionerer, hvordan udviklere griber formularhåndtering an, især når man interagerer med server-side logik. Denne eksperimentelle hook, som er en del af Reacts løbende udforskning af serverkomponenter og -handlinger, tilbyder en strømlinet og mere effektiv tilgang til at håndtere formulartilstand og fejl.

Hvad er experimental_useFormState?

experimental_useFormState er en React-hook designet til at forenkle formularhåndtering, især i scenarier, hvor du interagerer med serverhandlinger. Den giver en mekanisme til at sende en formulartilstand mellem klienten og serveren, hvilket giver en mere problemfri brugeroplevelse og forbedret fejlhåndtering. Den integreres direkte med React Server Components og Server Actions, hvilket muliggør effektiv datahentning og -mutation.

Før vi dykker ned i detaljerne, er det vigtigt at bemærke, at denne hook i øjeblikket er eksperimentel. Det betyder, at API'et kan ændre sig i fremtidige udgivelser. Derfor anbefales det at bruge den med forsigtighed i produktionsmiljøer og holde sig opdateret med den seneste React-dokumentation.

Hvorfor bruge experimental_useFormState?

Traditionel formularhåndtering i React involverer ofte at håndtere formulartilstand lokalt ved hjælp af hooks som useState eller biblioteker som Formik eller React Hook Form. Selvom disse tilgange er effektive til validering på klientsiden og simple formularinteraktioner, kan de blive besværlige, når man håndterer server-side operationer såsom dataindsendelse og fejlhåndtering. Her er flere fordele, som experimental_useFormState tilbyder:

• Forenklet integration med serverhandlinger: Krogen gør det betydeligt lettere at forbinde dine formularer til serverhandlinger. Den håndterer kompleksiteten ved at sende data til serveren, styre indlæsningstilstanden og vise server-side fejl.
• Forbedret brugeroplevelse: Ved at sende formulartilstanden mellem klienten og serveren giver experimental_useFormState mulighed for en mere responsiv og interaktiv brugeroplevelse. For eksempel kan du give øjeblikkelig feedback til brugeren, mens formularen behandles på serveren.
• Centraliseret fejlhåndtering: Krogen giver en centraliseret mekanisme til håndtering af formularvalideringsfejl, både på klienten og serveren. Dette forenkler visningen af fejl og sikrer en ensartet brugeroplevelse.
• Progressiv forbedring: Brug af Server Actions i forbindelse med experimental_useFormState understøtter progressiv forbedring. Formularen kan fungere, selvom JavaScript er deaktiveret, hvilket giver en grundlæggende oplevelse for alle brugere.
• Mindre standardkode (boilerplate): Sammenlignet med traditionelle formularhåndteringsteknikker reducerer experimental_useFormState mængden af standardkode, der kræves, hvilket gør dine komponenter renere og mere vedligeholdelsesvenlige.

Sådan bruges experimental_useFormState

For at bruge experimental_useFormState skal du først sikre dig, at du bruger en React-version, der understøtter Server Actions (React 18 eller nyere). Du skal også aktivere de eksperimentelle funktioner i din React-konfiguration. Dette indebærer typisk at konfigurere din bundler (f.eks. Webpack, Parcel) til at aktivere de eksperimentelle funktioner.

Her er et grundlæggende eksempel på, hvordan man bruger experimental_useFormState:

Eksempel: En simpel kontaktformular

Lad os oprette en simpel kontaktformular med felter til navn, e-mail og besked. Vi vil bruge experimental_useFormState til at håndtere formularindsendelsen og vise eventuelle fejl, der opstår.

1. Definer en serverhandling:

Først skal vi definere en serverhandling, der skal håndtere formularindsendelsen. Denne handling vil modtage formulardataene og udføre enhver nødvendig server-side validering og behandling (f.eks. sende en e-mail).

// server-actions.js 'use server'; import { experimental_useFormState as useFormState } from 'react'; async function submitForm(prevState, formData) { // Simuler validering på serversiden const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); if (!name) { return { error: 'Navn er påkrævet' }; } if (!email) { return { error: 'E-mail er påkrævet' }; } if (!message) { return { error: 'Besked er påkrævet' }; } // Simuler afsendelse af en e-mail try { await new Promise(resolve => setTimeout(resolve, 1000)); // Simuler netværksforsinkelse console.log('Formular indsendt med succes!'); return { success: true, message: 'Tak for din besked!' }; } catch (error) { console.error('Fejl ved afsendelse af e-mail:', error); return { error: 'Kunne ikke sende besked. Prøv venligst igen.' }; } } export default submitForm;

2. Opret React-komponenten:

Lad os nu oprette React-komponenten, der vil gengive formularen og bruge experimental_useFormState til at håndtere formulartilstanden.

// ContactForm.jsx 'use client'; import { experimental_useFormState as useFormState } from 'react'; import submitForm from './server-actions'; function ContactForm() { const [state, formAction] = useFormState(submitForm, null); return (

Navn:

E-mail:

Besked:

Indsend {state?.error &&

{state.error}

} {state?.success &&

{state.message}

}

); } export default ContactForm;

Forklaring:

• 'use client';: Dette direktiv fortæller React, at dette er en klientkomponent. Dette er nødvendigt, fordi experimental_useFormState kan bruges i klientkomponenter til at interagere med serverhandlinger.
• useFormState(submitForm, null): Denne hook tager to argumenter: serverhandlingen, der skal udføres (submitForm), og den indledende tilstand (null i dette tilfælde). Den returnerer et array, der indeholder den aktuelle formulartilstand og en funktion til at udløse serverhandlingen. Den returnerede `formAction` skal gives til formularens `action`-prop.
• form action={formAction}: Dette binder serverhandlingen til formularindsendelsen. Når formularen indsendes, vil submitForm-handlingen blive udført på serveren.
• state?.error: Dette viser eventuelle fejlmeddelelser, der returneres fra serverhandlingen.
• state?.success: Dette viser eventuelle succesmeddelelser, der returneres fra serverhandlingen.
• state?.pending: Dette sættes automatisk til true under serverhandlingen, hvilket lader dig deaktivere indsend-knappen.

Detaljeret forklaring af koden

Lad os gennemgå koden trin for trin for at forstå, hvordan den virker.

Serverhandling (server-actions.js)

• 'use server';: Dette direktiv markerer filen som indeholdende serverhandlinger. Det er afgørende for, at React kan forstå, at funktionerne i denne fil skal udføres på serveren.
• async function submitForm(prevState, formData): Dette definerer serverhandlingsfunktionen. Den tager to argumenter: prevState (den forrige tilstand af formularen) og formData (en instans af FormData, der indeholder formulardataene).
• formData.get('name'), formData.get('email'), formData.get('message'): Disse linjer udtrækker formulardataene fra FormData-objektet. Argumentet til get() er name-attributten for det tilsvarende inputfelt i formularen.
• Validering på serversiden: Koden udfører grundlæggende validering på serversiden for at sikre, at alle påkrævede felter er til stede. Hvis nogen felter mangler, returnerer den et fejl-objekt til klienten.
• Simulering af e-mailafsendelse: Koden simulerer afsendelse af en e-mail ved at bruge await new Promise(resolve => setTimeout(resolve, 1000)). Dette introducerer en forsinkelse på 1 sekund for at simulere netværksforsinkelse. I en virkelig applikation ville du erstatte dette med den faktiske logik for e-mailafsendelse (f.eks. ved hjælp af Nodemailer eller SendGrid).
• Fejlhåndtering: Koden inkluderer en try...catch-blok til at håndtere eventuelle fejl, der opstår under e-mailafsendelsesprocessen. Hvis der opstår en fejl, logger den fejlen til konsollen og returnerer et fejl-objekt til klienten.
• Returnering af tilstanden: Serverhandlingen returnerer et objekt, der enten indeholder en fejlmeddelelse eller en succesmeddelelse. Dette objekt bliver den nye tilstand, der sendes til klientkomponenten via useFormState-hooken.

Klientkomponent (ContactForm.jsx)

• 'use client';: Dette direktiv angiver, at denne komponent er en klientkomponent og kan bruge client-side hooks som useState og useEffect. Det er påkrævet for at bruge hooks og interagere med DOM.
• const [state, formAction] = useFormState(submitForm, null);: Denne linje kalder experimental_useFormState-hooken. Den sender submitForm-serverhandlingen som det første argument og den indledende tilstand (null) som det andet argument. Hooken returnerer et array, der indeholder den aktuelle formulartilstand (state) og en funktion til at udløse serverhandlingen (formAction).
• <form action={formAction}>: Dette sætter action-attributten for formularen til formAction-funktionen. Når formularen indsendes, vil denne funktion blive kaldt, hvilket vil udløse submitForm-serverhandlingen.
• <input type="text" id="name" name="name" />, <input type="email" id="email" name="email" />, <textarea id="message" name="message"></textarea>: Disse er inputfelterne til formularen. name-attributterne for disse felter er vigtige, fordi de bestemmer, hvordan dataene tilgås i serverhandlingen ved hjælp af formData.get('name'), formData.get('email') og formData.get('message').
• <button type="submit" disabled={state?.pending}>Submit</button>: Dette er indsend-knappen til formularen. disabled={state?.pending}-attributten deaktiverer knappen, mens formularen indsendes til serveren, for at forhindre brugeren i at indsende formularen flere gange.
• {state?.error && <p style={{ color: 'red' }}>{state.error}</p>}: Dette gengiver betinget en fejlmeddelelse, hvis der er en fejl i formulartilstanden. Fejlmeddelelsen vises i rødt.
• {state?.success && <p style={{ color: 'green' }}>{state.message}</p>}: Dette gengiver betinget en succesmeddelelse, hvis formularen blev indsendt med succes. Succesmeddelelsen vises i grønt.

Avanceret brug og overvejelser

Selvom eksemplet ovenfor demonstrerer den grundlæggende brug af experimental_useFormState, er der flere andre aspekter at overveje, når man bruger det i mere komplekse applikationer.

Optimistiske opdateringer

Du kan implementere optimistiske opdateringer for at give en mere responsiv brugeroplevelse. Optimistiske opdateringer indebærer at opdatere UI'et med det samme, efter at brugeren har indsendt formularen, under antagelse af, at serverhandlingen vil lykkes. Hvis serverhandlingen mislykkes, kan du rulle opdateringen tilbage og vise en fejlmeddelelse.

// Eksempel på optimistiske opdateringer async function submitForm(prevState, formData) { // Opdater UI'et optimistisk // (Dette ville typisk involvere opdatering af tilstanden for en liste eller tabel) const id = Date.now(); // Midlertidigt ID return { optimisticUpdate: { id: id, name: formData.get('name'), email: formData.get('email'), } } } // I din klientkomponent: const [state, formAction] = useFormState(submitForm, null); // Tilstand, hvor du gengiver den optimistiske opdatering const [items, setItems] = useState([]); useEffect(()=>{ if (state && state.optimisticUpdate) { setItems(prev => [...prev, state.optimisticUpdate]); } }, [state])

I dette forenklede eksempel returnerer serverhandlingen en optimisticUpdate-egenskab. I klientkomponenten udtrækker vi den og bruger den til at tilføje til et array, der gengives i vores applikation. For eksempel kan dette repræsentere tilføjelsen af en ny kommentar til en liste af kommentarer på et blogindlæg.

Fejlhåndtering

Effektiv fejlhåndtering er afgørende for en god brugeroplevelse. experimental_useFormState gør det lettere at håndtere fejl, der opstår under formularindsendelse. Du kan vise fejlmeddelelser til brugeren og give vejledning om, hvordan man retter fejlene.

Her er nogle bedste praksisser for fejlhåndtering:

• Giv klare og specifikke fejlmeddelelser: Fejlmeddelelserne skal være klare, præcise og specifikke for den fejl, der opstod. Undgå generiske fejlmeddelelser som "Der opstod en fejl."
• Vis fejlmeddelelser tæt på de relevante inputfelter: Vis fejlmeddelelser tæt på de inputfelter, der forårsagede fejlene. Dette gør det lettere for brugeren at forstå, hvilke felter der skal rettes.
• Brug visuelle signaler til at fremhæve fejl: Brug visuelle signaler såsom rød tekst eller kanter til at fremhæve de inputfelter, der har fejl.
• Giv forslag til at rette fejl: Hvis muligt, giv forslag til at rette fejlene. For eksempel, hvis brugeren indtaster en ugyldig e-mailadresse, foreslå det korrekte format.

Overvejelser om tilgængelighed

Når man bygger formularer, er det vigtigt at overveje tilgængelighed for at sikre, at dine formularer kan bruges af personer med handicap. Her er nogle overvejelser om tilgængelighed, du skal huske på:

• Brug semantisk HTML: Brug semantiske HTML-elementer som <label>, <input> og <textarea> til at strukturere dine formularer. Dette gør det lettere for hjælpeteknologier at forstå formularens struktur.
• Angiv labels for alle inputfelter: Brug <label>-elementet til at angive labels for alle inputfelter. for-attributten for <label>-elementet skal matche id-attributten for det tilsvarende inputfelt.
• Brug ARIA-attributter: Brug ARIA-attributter til at give yderligere oplysninger om formularelementerne til hjælpeteknologier. For eksempel kan du bruge aria-required-attributten til at angive, at et inputfelt er påkrævet.
• Sørg for tilstrækkelig kontrast: Sørg for, at der er tilstrækkelig kontrast mellem teksten og baggrundsfarven. Dette gør det lettere for personer med nedsat syn at læse formularen.
• Test med hjælpeteknologier: Test dine formularer med hjælpeteknologier som skærmlæsere for at sikre, at de kan bruges af personer med handicap.

Internationalisering (i18n) og lokalisering (l10n)

Når man bygger applikationer til et globalt publikum, er internationalisering (i18n) og lokalisering (l10n) afgørende. Dette indebærer at tilpasse din applikation til forskellige sprog, kulturer og regioner.

Her er nogle overvejelser for i18n og l10n, når du bruger experimental_useFormState:

• Lokaliser fejlmeddelelser: Lokaliser de fejlmeddelelser, der vises til brugeren. Dette sikrer, at fejlmeddelelserne vises på brugerens foretrukne sprog.
• Understøt forskellige dato- og talformater: Understøt forskellige dato- og talformater baseret på brugerens lokalitet.
• Håndter højre-til-venstre-sprog: Hvis din applikation understøtter højre-til-venstre-sprog (f.eks. arabisk, hebraisk), skal du sikre, at formularlayoutet vises korrekt på disse sprog.
• Brug et oversættelsesbibliotek: Brug et oversættelsesbibliotek som i18next eller react-intl til at administrere dine oversættelser.

For eksempel kan du bruge en ordbog til at gemme dine fejlmeddelelser og derefter slå dem op baseret på brugerens lokalitet.

// Eksempel med i18next import i18next from 'i18next'; i18next.init({ resources: { da: { translation: { "name_required": "Navn er påkrævet", "email_required": "E-mail er påkrævet", } }, fr: { translation: { "name_required": "Le nom est requis", "email_required": "L'email est requis", } } }, lng: 'da', fallbackLng: 'da', interpolation: { escapeValue: false // react beskytter allerede mod xss } }); // I din serverhandling: if (!name) { return { error: i18next.t("name_required") }; }

Dette eksempel bruger i18next til at administrere oversættelser. i18next.t()-funktionen bruges til at slå den oversatte fejlmeddelelse op baseret på brugerens lokalitet.

Globale overvejelser og bedste praksisser

Når man udvikler webapplikationer til et globalt publikum, skal der tages hensyn til flere vigtige overvejelser for at sikre en problemfri og inkluderende brugeroplevelse. Disse overvejelser spænder over forskellige områder, herunder tilgængelighed, kulturel følsomhed og ydeevneoptimering.

Tidszoner

Når man håndterer datoer og tider, er det afgørende at håndtere tidszoner korrekt. Brugere kan befinde sig i forskellige tidszoner, så du skal sikre, at datoer og tider vises i brugerens lokale tidszone.

Her er nogle bedste praksisser for håndtering af tidszoner:

• Gem datoer og tider i UTC: Gem datoer og tider i UTC (Coordinated Universal Time) i din database. Dette sikrer, at datoer og tider er konsistente på tværs af alle tidszoner.
• Brug et tidszonebibliotek: Brug et tidszonebibliotek som Moment.js eller Luxon til at konvertere datoer og tider til brugerens lokale tidszone.
• Tillad brugere at angive deres tidszone: Tillad brugere at angive deres tidszone i deres profilindstillinger. Dette giver dig mulighed for at vise datoer og tider i deres foretrukne tidszone.

Valutaer

Hvis din applikation håndterer finansielle transaktioner, skal du understøtte forskellige valutaer. Brugere kan befinde sig i forskellige lande med forskellige valutaer.

Her er nogle bedste praksisser for håndtering af valutaer:

• Gem priser i en konsistent valuta: Gem priser i en konsistent valuta (f.eks. USD) i din database.
• Brug et valutakonverteringsbibliotek: Brug et valutakonverteringsbibliotek til at konvertere priser til brugerens lokale valuta.
• Vis priser med det korrekte valutasymbol: Vis priser med det korrekte valutasymbol baseret på brugerens lokalitet.
• Giv brugerne mulighed for at vælge deres valuta: Tillad brugere at vælge deres foretrukne valuta.

Kulturel følsomhed

Det er vigtigt at være kulturelt følsom, når man udvikler webapplikationer til et globalt publikum. Det betyder at være opmærksom på forskellige kulturelle normer og værdier og undgå indhold, der kan være stødende eller ufølsomt.

Her er nogle tips til kulturel følsomhed:

• Undgå at bruge idiomer eller slang: Undgå at bruge idiomer eller slang, som måske ikke forstås af folk fra andre kulturer.
• Vær forsigtig med billeder og symboler: Vær forsigtig med de billeder og symboler, du bruger i din applikation. Nogle billeder og symboler kan have forskellige betydninger i forskellige kulturer.
• Respekter forskellige religiøse overbevisninger: Respekter forskellige religiøse overbevisninger og undgå indhold, der kan betragtes som stødende for religiøse grupper.
• Vær opmærksom på forskellige kulturelle normer: Vær opmærksom på forskellige kulturelle normer og værdier. For eksempel betragtes det i nogle kulturer som uhøfligt at have direkte øjenkontakt.

Ydeevneoptimering for et globalt publikum

Brugere over hele verden har varierende internethastigheder og enhedskapaciteter. Optimering af din applikations ydeevne er afgørende for at sikre en jævn og responsiv oplevelse for alle brugere, uanset deres placering eller enhed.

• Content Delivery Networks (CDN'er): Brug CDN'er til at distribuere din applikations aktiver (f.eks. billeder, JavaScript, CSS) til servere over hele verden. Dette reducerer latenstiden for brugere, der befinder sig langt fra din oprindelsesserver.
• Billedoptimering: Optimer billeder ved at komprimere dem og bruge passende filformater (f.eks. WebP). Dette reducerer billedernes filstørrelse og forbedrer sidens indlæsningstider.
• Code Splitting: Brug code splitting til at opdele din applikation i mindre bidder, der kan indlæses efter behov. Dette reducerer applikationens indledende indlæsningstid.
• Caching: Brug caching til at gemme ofte tilgåede data i browseren eller på serveren. Dette reducerer antallet af anmodninger, som applikationen skal foretage til serveren.
• Minificering og bundling: Minificer og bundl dine JavaScript- og CSS-filer for at reducere deres filstørrelse.

Alternativer til experimental_useFormState

Selvom experimental_useFormState tilbyder en overbevisende tilgang til formularhåndtering med Server Actions, er det vigtigt at være opmærksom på alternative løsninger, især da det stadig er i den eksperimentelle fase. Her er et par populære alternativer:

• React Hook Form: React Hook Form er et ydeevneorienteret og fleksibelt formularbibliotek, der bruger ukontrollerede komponenter. Det er kendt for sine minimale gen-gengivelser og fremragende ydeevne. Det integreres godt med valideringsbiblioteker som Yup og Zod.
• Formik: Formik er et populært formularbibliotek, der forenkler håndtering af formulartilstand, validering og indsendelse. Det giver et API på et højere niveau end React Hook Form og er et godt valg til komplekse formularer.
• Redux Form: Redux Form er et formularbibliotek, der integreres med Redux. Det er et godt valg for applikationer, der allerede bruger Redux til tilstandsstyring.
• Brug af useState og useRef: For simple formularer kan du også håndtere formulartilstanden direkte ved hjælp af Reacts useState-hook og få adgang til formularværdierne ved hjælp af useRef. Denne tilgang kræver mere manuel håndtering, men kan være velegnet til grundlæggende formularer, hvor du ønsker finkornet kontrol.

Konklusion

experimental_useFormState repræsenterer et markant fremskridt inden for React-formularhåndtering, især når det kombineres med Server Actions. Det tilbyder en forenklet og mere effektiv måde at håndtere formulartilstand, interagere med server-side logik og forbedre brugeroplevelsen. Selvom det stadig er i den eksperimentelle fase, er det værd at udforske til nye projekter og overveje til eksisterende projekter, efterhånden som det modnes. Husk at holde dig opdateret med den seneste React-dokumentation og bedste praksisser for at sikre, at du bruger hooken effektivt og ansvarligt.

Ved at forstå principperne beskrevet i denne vejledning og tilpasse dem til dine specifikke behov, kan du skabe robuste, tilgængelige og globalt bevidste webapplikationer, der giver en overlegen brugeroplevelse til brugere over hele verden. At omfavne disse bedste praksisser forbedrer ikke kun brugervenligheden af dine applikationer, men demonstrerer også et engagement i inklusivitet og kulturel følsomhed, hvilket i sidste ende bidrager til succes og rækkevidde af dine projekter på globalt plan.

I takt med at React fortsætter med at udvikle sig, vil værktøjer som experimental_useFormState spille en stadig vigtigere rolle i opbygningen af moderne, server-renderede React-applikationer. At forstå og udnytte disse værktøjer vil være afgørende for at være på forkant med udviklingen og levere exceptionelle brugeroplevelser.