24. august 2025Norsk

Utforsk Reacts experimental_useFormState hook for strømlinjeformet og effektiv skjemastatusadministrasjon. Lær hvordan du forenkler komplekse skjemaer, forbedrer ytelsen og håndterer asynkrone handlinger effektivt.

React experimental_useFormState: En omfattende veiledning til forbedret skjemahåndtering

Reacts stadig utviklende økosystem introduserer kontinuerlig innovative verktøy for å forbedre utvikleropplevelsen og applikasjonsytelsen. En slik fremskritt er experimental_useFormState Hook. Denne hooken, som for tiden er i en eksperimentell fase, gir en kraftig og strømlinjeformet tilnærming til å administrere skjemastatus og håndtere asynkrone handlinger, spesielt når den kombineres med React Server Components og Actions. Denne veiledningen vil fordype seg i detaljene i experimental_useFormState, og utforske fordelene, brukstilfellene og implementeringsstrategiene.

Hva er `experimental_useFormState`?

experimental_useFormState Hook er designet for å forenkle skjemahåndtering i React-applikasjoner. Den tilbyr en deklarativ måte å håndtere skjemastatus, feil og asynkrone innsendinger. I motsetning til tradisjonelle metoder som ofte involverer manuelle statusoppdateringer og kompleks hendelseshåndtering, strømlinjeformer experimental_useFormState denne prosessen ved å tilby en enkelt hook for å administrere hele skjemaets livssyklus.

I kjernen lar experimental_useFormState deg knytte en statusverdi til en funksjon som utfører skjemainnsendingslogikken. Denne funksjonen, vanligvis en serverhandling i sammenheng med React Server Components, er ansvarlig for å validere data og utføre nødvendige mutasjoner. Hooken administrerer deretter statusen for denne funksjonens utførelse, og gir tilbakemelding til brukeren om skjemaets status (f.eks. lasting, suksess, feil).

Fordeler med å bruke `experimental_useFormState`

Forenklet skjemalogikk: Reduserer boilerplate-kode ved å sentralisere skjemastatusadministrasjon i en enkelt hook.
Forbedret ytelse: Optimaliserer rendering ved å minimere unødvendige oppdateringer og utnytte server-side datamutasjoner.
Deklarativ tilnærming: Fremmer en mer lesbar og vedlikeholdbar kodebase gjennom en deklarativ programmeringsstil.
Sømløs integrasjon med serverhandlinger: Designet for å fungere sømløst med React Server Components og Actions, og muliggjør effektiv datahenting og mutasjoner.
Forbedret brukeropplevelse: Gir klar og konsis tilbakemelding til brukeren angående skjemaets status, og forbedrer den generelle brukeropplevelsen.

Brukstilfeller for `experimental_useFormState`

experimental_useFormState Hook er spesielt godt egnet for scenarier som involverer komplekse skjemaer som krever server-side validering og datamutasjoner. Her er noen vanlige brukstilfeller:

Autentiseringsskjemaer: Håndtering av brukerregistrering, innlogging og passordtilbakestillingsskjemaer.
E-handelsskjemaer: Behandling av kassesider, oppdatering av brukerprofiler og administrering av produktoppføringer.
Innholdsadministrasjonssystemer (CMS): Opprette og redigere artikler, administrere brukerroller og konfigurere nettstedinnstillinger.
Sosiale medieplattformer: Legge ut oppdateringer, sende inn kommentarer og administrere brukerprofiler.
Dataregistreringsskjemaer: Fange opp og validere data fra forskjellige kilder, for eksempel undersøkelser, tilbakemeldingsskjemaer og kundeinformasjon.

Implementeringseksempel: Et enkelt kontaktskjema

La oss illustrere bruken av experimental_useFormState med et praktisk eksempel: et enkelt kontaktskjema. Dette skjemaet vil samle inn brukerens navn, e-post og melding, og deretter sende dataene til en serverhandling for behandling.

1. Definer serverhandlingen

Først må vi definere en serverhandling som håndterer skjemainnsendingen. Denne handlingen vil validere dataene og sende et e-postvarsel.

```javascript // app/actions.js 'use server'; import { revalidatePath } from 'next/cache'; import { sendEmail } from './utils/email'; // Eksempel på e-postsendingfunksjon export async function submitContactForm(prevState, formData) { const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); // Grunnleggende validering if (!name || !email || !message) { return 'Vennligst fyll ut alle feltene.'; } try { await sendEmail({ to: 'admin@example.com', // Erstatt med din administrator-e-post subject: 'Nytt kontaktskjema innsendt', text: `Navn: ${name}\nE-post: ${email}\nMelding: ${message}`, }); revalidatePath('/'); // Revalider hjemmesiden eller relevant sti return 'Takk for din melding!'; } catch (error) { console.error('Feil ved sending av e-post:', error); return 'En feil oppsto. Vennligst prøv igjen senere.'; } } ```

Forklaring:

Direktivet 'use server' indikerer at denne funksjonen skal utføres på serveren.
Funksjonen mottar forrige status (prevState) og skjemadataene (formData) som argumenter.
Den trekker ut navn, e-post og melding fra skjemadataene.
Den utfører grunnleggende validering for å sikre at alle nødvendige felt er fylt ut.
Den bruker en asynkron funksjon sendEmail (som du må implementere separat) for å sende e-postvarselet. Dette kan bruke en tjeneste som SendGrid, Mailgun eller AWS SES.
revalidatePath('/') tvinger Next.js til å hente dataene på nytt for hjemmesiden, og sikrer at eventuelle relevante endringer gjenspeiles umiddelbart.
Den returnerer en suksess- eller feilmelding for å oppdatere skjemastatusen.

2. Implementer React-komponenten

La oss nå opprette React-komponenten som bruker experimental_useFormState for å administrere skjemastatusen og håndtere innsendingen.

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

Navn:

E-post:

Melding:

</div>
      <button type="submit">Send</button>
      {state && <p>{state}</p>}
    </form>
  );
}

export default ContactForm;
```

<p><b>Forklaring:</b></p>
<ul>
  <li>Direktivet <code>'use client'</code> indikerer at denne komponenten er en klientkomponent.</li>
  <li>Vi importerer <code>experimental_useFormState</code> som <code>useFormState</code> for korthets skyld og <code>submitContactForm</code>-handlingen.</li>
  <li>Vi kaller <code>useFormState</code>, og sender inn <code>submitContactForm</code>-handlingen og en initial status på <code>null</code>.</li>
  <li>Hooken returnerer den nåværende statusen (<code>state</code>) og en funksjon (<code>formAction</code>) som utløser skjemainnsendingen.</li>
  <li>Vi knytter <code>formAction</code>-funksjonen til <code>action</code>-propen til <code>form</code>-elementet. Dette er avgjørende for at React skal håndtere skjemainnsendingen riktig.</li>
  <li>Skjemaet inkluderer inndatafelt for navn, e-post og melding, samt en send-knapp.</li>
  <li>Linjen <code>{state && <p>{state}</p>}</code> viser den nåværende statusen (suksess- eller feilmelding) til brukeren.</li>
</ul>

<h3>3. Konfigurere e-postsendingstjenesten din (sendEmail eksempel)</h3>

<p>Du må implementere <code>sendEmail</code>-funksjonen. Her er et eksempel ved hjelp av Nodemailer med en Gmail-konto (Merk: Å bruke Gmail direkte i produksjon frarådes generelt. Bruk en dedikert e-posttjeneste som SendGrid, Mailgun eller AWS SES for produksjonsmiljøer.):</p>

```javascript
// app/utils/email.js
import nodemailer from 'nodemailer';

export async function sendEmail({ to, subject, text }) {
  // Opprett et transporterobjekt ved hjelp av Gmail SMTP
  const transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
      user: 'din_gmail_adresse@gmail.com', // Erstatt med din Gmail-adresse
      pass: 'ditt_gmail_passord',       // Erstatt med ditt Gmail-passord eller apppassord
    },
  });

// Definer e-postalternativene
  const mailOptions = {
    from: 'din_gmail_adresse@gmail.com',
    to: to,
    subject: subject,
    text: text,
  };

// Send e-posten
  try {
    await transporter.sendMail(mailOptions);
    console.log('E-post sendt successfully');
  } catch (error) {
    console.error('Feil ved sending av e-post:', error);
    throw error; // Kast feilen på nytt for å bli fanget opp i serverhandlingen
  }
}
```

<p><b>Viktig sikkerhetsmerknad:</b> Aldri legg inn det faktiske Gmail-passordet ditt direkte i kodebasen din! Bruk miljøvariabler til å lagre sensitiv informasjon. For produksjonsbruk, generer et apppassord spesielt for Nodemailer og unngå å bruke hovedpassordet ditt for Gmail. Dedikerte e-postsendingstjenester tilbyr bedre leveringsdyktighet og sikkerhet sammenlignet med å bruke Gmail direkte.</p>

<h3>4. Kjøre eksemplet</h3>

<p>Sørg for at du har de nødvendige avhengighetene installert:</p>

```bash
npm install nodemailer
```

<p>eller</p>

```bash
yarn add nodemailer
```

<p>Kjør deretter Next.js-utviklingsserveren:</p>

```bash
npm run dev
```

<p>eller</p>

```bash
yarn dev
```

<p>Åpne nettleseren din og naviger til siden som inneholder <code>ContactForm</code>-komponenten. Fyll ut skjemaet og send det inn. Du skal se enten suksessmeldingen eller en feilmelding som vises under skjemaet. Sjekk e-postinnboksen din for å bekrefte at e-posten ble sendt.</p>

<h2>Avansert bruk og hensyn</h2>

<h3>1. Håndtere lastestatuser</h3>

<p>For å gi en bedre brukeropplevelse er det viktig å indikere når skjemaet sendes inn. Selv om <code>experimental_useFormState</code> ikke direkte eksponerer en lastestatus, kan du administrere dette manuelt ved hjelp av Reacts <code>useTransition</code>-hook i forbindelse med <code>formAction</code>.</p>

```javascript
'use client';

import { experimental_useFormState as useFormState, useTransition } from 'react';
import { submitContactForm } from './actions';

function ContactForm() {
  const [state, formAction] = useFormState(submitContactForm, null);
  const [isPending, startTransition] = useTransition();

const handleSubmit = async (formData) => {
    startTransition(() => {
      formAction(formData);
    });
  };

return (
    <form action={handleSubmit}>
      <div>
        <label htmlFor="name">Navn:</label>
        <input type="text" id="name" name="name" required />
      </div>
      <div>
        <label htmlFor="email">E-post:</label>
        <input type="email" id="email" name="email" required />
      </div>
      <div>
        <label htmlFor="message">Melding:</label>
        <textarea id="message" name="message" rows="4" required />
      </div>
      <button type="submit" disabled={isPending}>
        {isPending ? 'Sender...' : 'Send'}
      </button>
      {state && <p>{state}</p>}
    </form>
  );
}

export default ContactForm;
```

<p>I dette eksemplet:</p>

<ul>
  <li>Vi importerer <code>useTransition</code> fra 'react'.</li>
  <li>Vi kaller <code>useTransition</code> for å få <code>isPending</code>-statusen og <code>startTransition</code>-funksjonen.</li>
  <li>Vi omslutter kallet til <code>formAction</code> inne i <code>startTransition</code>. Dette forteller React å behandle skjemainnsendingen som en overgang, slik at den kan avbrytes om nødvendig.</li>
  <li>Vi deaktiverer send-knappen mens <code>isPending</code> er sant og endrer knappen til "Sender...".</li>
</ul>

<h3>2. Feilhåndtering og validering</h3>

<p>Robust feilhåndtering er avgjørende for å gi en god brukeropplevelse. Serverhandlingen skal utføre grundig validering og returnere informative feilmeldinger til klienten. Klientkomponenten kan deretter vise disse meldingene til brukeren.</p>

<p><b>Server-side validering:</b> Valider alltid data på serveren for å forhindre ondsinnet inndata og sikre dataintegritet. Bruk biblioteker som Zod eller Yup for skjema validering.</p>

<p><b>Klient-side validering (valgfritt):</b> Selv om server-side validering er viktig, kan klient-side validering gi umiddelbar tilbakemelding til brukeren og forbedre brukeropplevelsen. Klient-side validering bør imidlertid aldri stole på som den eneste kilden til sannhet.</p>

<h3>3. Optimistiske oppdateringer</h3>

<p>Optimistiske oppdateringer kan gjøre at applikasjonen din føles mer responsiv ved å umiddelbart oppdatere UI som om skjemainnsendingen var vellykket, selv før serveren bekrefter den. Vær imidlertid forberedt på å håndtere feil og tilbakestille endringene hvis innsendingen mislykkes.</p>

<p>Med <code>experimental_useFormState</code> kan du implementere optimistiske oppdateringer ved å oppdatere den lokale statusen basert på skjemadataene før du kaller <code>formAction</code>. Hvis serverhandlingen mislykkes, kan du tilbakestille endringene basert på feilmeldingen som returneres av hooken.</p>

<h3>4. Revalidering og hurtigbuffer</h3>

<p>React Server Components og Actions utnytter hurtigbuffer for å forbedre ytelsen. Når en skjemainnsending endrer data, er det viktig å revalidere hurtigbufferen for å sikre at UI gjenspeiler de nyeste endringene.</p>

<p>Funksjonene <code>revalidatePath</code> og <code>revalidateTag</code> fra <code>next/cache</code> kan brukes til å ugyldiggjøre spesifikke deler av hurtigbufferen. I <code>submitContactForm</code>-eksemplet brukes <code>revalidatePath('/')</code> til å revalidere hjemmesiden etter en vellykket skjemainnsending.</p>

<h3>5. Internasjonalisering (i18n)</h3>

<p>Når du bygger applikasjoner for et globalt publikum, er internasjonalisering (i18n) avgjørende. Dette innebærer å tilpasse applikasjonen din til forskjellige språk, regioner og kulturelle preferanser.</p>

<p>For skjemaer betyr dette å tilby lokaliserte etiketter, feilmeldinger og valideringsregler. Bruk i18n-biblioteker som <code>next-intl</code> eller <code>react-i18next</code> for å administrere oversettelser og formatere data i henhold til brukerens lokale innstillinger.</p>

<p>Eksempel ved bruk av <code>next-intl</code>:</p>

```javascript
// i18n.js (eksempel)
import { createTranslator } from 'next-intl';

const messages = {
  en: {
    ContactForm: {
      NameLabel: 'Name',
      EmailLabel: 'Email',
      MessageLabel: 'Message',
      SubmitButton: 'Submit',
      SuccessMessage: 'Thank you for your message!',
      ErrorMessage: 'An error occurred. Please try again later.',
      NameRequired: 'Name is required',
      EmailRequired: 'Email is required',
      MessageRequired: 'Message is required',
    },
  },
  es: {
    ContactForm: {
      NameLabel: 'Nombre',
      EmailLabel: 'Correo electrónico',
      MessageLabel: 'Mensaje',
      SubmitButton: 'Enviar',
      SuccessMessage: '¡Gracias por tu mensaje!',
      ErrorMessage: 'Ocurrió un error. Inténtalo de nuevo más tarde.',
      NameRequired: 'El nombre es obligatorio',
      EmailRequired: 'El correo electrónico es obligatorio',
      MessageRequired: 'El mensaje es obligatorio',
    },
  },
  // Legg til flere språk etter behov
};

export async function getTranslations(locale) {
  return createTranslator({ locale, messages });
}
```

```javascript
// ContactForm.js
'use client';

import { experimental_useFormState as useFormState, useTransition } from 'react';
import { submitContactForm } from './actions';
import { useLocale, useTranslations } from 'next-intl';

function ContactForm() {
  const [state, formAction] = useFormState(submitContactForm, null);
  const [isPending, startTransition] = useTransition();
  const t = useTranslations('ContactForm');

const handleSubmit = async (formData) => {
    startTransition(() => {
      formAction(formData);
    });
  };

return (
    <form action={handleSubmit}>
      <div>
        <label htmlFor="name">{t('NameLabel')}:</label>
        <input type="text" id="name" name="name" required />
      </div>
      <div>
        <label htmlFor="email">{t('EmailLabel')}:</label>
        <input type="email" id="email" name="email" required />
      </div>
      <div>
        <label htmlFor="message">{t('MessageLabel')}:</label>
        <textarea id="message" name="message" rows="4" required />
      </div>
      <button type="submit" disabled={isPending}>
        {isPending ? 'Sender...' : t('SubmitButton')}
      </button>
      {state && <p>{state === 'Thank you for your message!' ? t('SuccessMessage') : t('ErrorMessage')}</p>}
    </form>
  );
}

export default ContactForm;
```

<h3>6. Tilgjengelighet (a11y)</h3>

<p>Tilgjengelighet er avgjørende for å sikre at applikasjonen din er brukbar for alle, inkludert personer med nedsatt funksjonsevne. Vurder følgende retningslinjer for tilgjengelighet når du bygger skjemaer:</p>

<ul>
  <li><b>Bruk semantisk HTML:</b> Bruk passende HTML-elementer, for eksempel <code><label></code>, <code><input></code> og <code><textarea></code>, for å gi struktur og mening til skjemaet ditt.</li>
  <li><b>Gi etiketter for alle skjemafelt:</b> Knytt etiketter til skjemafelt ved hjelp av <code>for</code>-attributtet på <code><label></code>-elementet og <code>id</code>-attributtet på skjemafeltet.</li>
  <li><b>Bruk ARIA-attributter:</b> Bruk ARIA-attributter for å gi tilleggsinformasjon om skjemaets struktur og atferd til assisterende teknologi.</li>
  <li><b>Sørg for tilstrekkelig fargekontrast:</b> Bruk tilstrekkelig fargekontrast mellom tekst- og bakgrunnsfarger for å sikre lesbarhet for personer med synshemming.</li>
  <li><b>Gi tastaturnavigasjon:</b> Sørg for at brukerne kan navigere i skjemaet bare ved hjelp av tastaturet.</li>
  <li><b>Test med assisterende teknologi:</b> Test skjemaet ditt med assisterende teknologi, for eksempel skjermlesere, for å sikre at det er tilgjengelig for personer med nedsatt funksjonsevne.</li>
</ul>

<h2>Globale hensyn og beste praksis</h2>

<h3>1. Tidssoner</h3>

<p>Når du arbeider med datoer og klokkeslett i skjemaer, er det viktig å vurdere tidssoner. Lagre datoer og klokkeslett i UTC-format på serveren og konverter dem til brukerens lokale tidssone på klienten.</p>

<h3>2. Valutaer</h3>

<p>Når du arbeider med pengeverdier i skjemaer, er det viktig å håndtere valutaer riktig. Bruk et valutaformateringsbibliotek for å formatere verdier i henhold til brukerens lokale innstillinger og vise det aktuelle valutasymbolet.</p>

<h3>3. Adresser</h3>

<p>Adresseformater varierer betydelig på tvers av forskjellige land. Bruk et bibliotek som støtter internasjonale adresseformater for å sikre at brukerne kan skrive inn adressene sine riktig.</p>

<h3>4. Telefonnumre</h3>

<p>Telefonnummerformater varierer også på tvers av forskjellige land. Bruk et telefonnummerformateringsbibliotek for å formatere telefonnumre i henhold til brukerens lokale innstillinger og validere at de er gyldige telefonnumre.</p>

<h3>5. Datapersonvern og overholdelse</h3>

<p>Vær oppmerksom på personvernregler, som GDPR og CCPA, når du samler inn og behandler skjemadata. Innhent samtykke fra brukerne før du samler inn dataene deres, og gi dem muligheten til å få tilgang til, endre og slette dataene sine.</p>

<h2>Konklusjon</h2>

<p><code>experimental_useFormState</code> Hook tilbyr en lovende tilnærming til å forenkle skjemahåndtering i React-applikasjoner. Ved å utnytte serverhandlinger og omfavne en deklarativ stil, kan utviklere bygge mer effektive, vedlikeholdbare og brukervennlige skjemaer. Selv om det fortsatt er i en eksperimentell fase, har <code>experimental_useFormState</code> et betydelig potensial for å strømlinjeforme arbeidsflyter og forbedre den generelle React-utviklingsopplevelsen. Ved å følge beste praksis som er skissert i denne veiledningen, kan du effektivt utnytte kraften til <code>experimental_useFormState</code> for å bygge robuste og skalerbare skjemaløsninger for applikasjonene dine.</p>

<p>Husk å alltid holde deg oppdatert med den nyeste React-dokumentasjonen og samfunnsdiskusjonene etter hvert som API-en utvikler seg fra eksperimentell til stabil.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormState</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">skjemahåndtering</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">skjemastatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">eksperimentell API</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React-skjemaer</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">serverhandlinger</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React Hook</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">skjemaoptimalisering</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">asynkrone skjemaer</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">datamutasjoner</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">UI-oppdateringer</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div style="display:none" id="S:3"></div><script>$RC("B:3","S:3")</script><div style="display:none" id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>

React experimental_useFormState: En omfattende veiledning til forbedret skjemahåndtering

Hva er experimental_useFormState?

Fordeler med å bruke experimental_useFormState

Brukstilfeller for experimental_useFormState

Implementeringseksempel: Et enkelt kontaktskjema

1. Definer serverhandlingen

2. Implementer React-komponenten

Hva er `experimental_useFormState`?

Fordeler med å bruke `experimental_useFormState`

Brukstilfeller for `experimental_useFormState`