React Academy · Les

React Actions en useActionState

Definieer server- en client-actions, verwerk formulierverzendingen en houd pending-statussen bij.

Les 3 van 413 stappen

React Actions en useActionState is een gratis React Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Academy bevat in totaal 4 lessen.

Welkom

In deze les definieer je React 19-acties, gebruik je useActionState om de status van formulierverzendingen te beheren en verwerk je statussen voor in behandeling zijnde acties en fouten op een overzichtelijke manier.

Wat zijn React-acties

Acties zijn asynchrone functies die je doorgeeft aan de `action`-eigenschap van een formulier (of aan `formAction` van een knop). React 19 behandelt ze op een speciale manier: het houdt de status bij, verwerkt fouten en integreert automatisch met overgangen.

Serveracties in Next.js

Voeg in Next.js met App Router bovenaan een functie 'use server' toe om er een serveractie van te maken. React voert de actie op de server uit wanneer een formulier wordt verzonden — je hebt geen API-route nodig.

'use server';

export async function createPost(formData) {
  const title = formData.get('title');
  await db.insert(posts).values({ title });
  revalidatePath('/posts');
}

Een actie in een formulier gebruiken

Geef de server- of clientactie rechtstreeks door aan de `action`-eigenschap van het formulier. React roept de actie aan met de FormData wanneer het formulier wordt verzonden.

import { createPost } from './actions';

export default function NewPostForm() {
  return (
    <form action={createPost}>
      <input name="title" />
      <button type="submit">Create</button>
    </form>
  );
}

useActionState

useActionState verpakt een actie en geeft je de huidige status (het resultaat van de laatste actie) en een boolean voor de status in behandeling. Je geeft de verpakte functie door aan de actie van het formulier.

'use client';
import { useActionState } from 'react';
import { createPost } from './actions';

function NewPostForm() {
  const [state, action, isPending] = useActionState(createPost, null);
  return (
    <form action={action}>
      {state?.error && <p>{state.error}</p>}
      <input name="title" />
      <button disabled={isPending}>Create</button>
    </form>
  );
}

Een actie die een status retourneert

De serveractie ontvangt `(prevState, formData)` wanneer je haar met useActionState gebruikt. Retourneer een object met informatie over succes of fouten — dit wordt de nieuwe status.

'use server';

export async function createPost(prevState, formData) {
  const title = formData.get('title')?.toString();
  if (!title) return { error: 'Title is required' };
  await db.insert(posts).values({ title });
  return { success: true };
}

isPending voor een uitgeschakelde verzendknop

Gebruik de waarde isPending van useActionState om de verzendknop uit te schakelen en een laadindicator te tonen terwijl de actie wordt uitgevoerd.

<button type="submit" disabled={isPending}>
  {isPending ? 'Saving...' : 'Save'}
</button>

Clientacties

Acties hoeven niet op de server te worden uitgevoerd. Een clientactie is een gewone asynchrone functie zonder 'use server'. Je krijgt nog steeds statusbeheer en beheer van de status in behandeling via useActionState.

async function clientAction(prevState, formData) {
  const res = await fetch('/api/post', {
    method: 'POST', body: formData,
  });
  if (!res.ok) return { error: 'Failed' };
  return { success: true };
}

useFormStatus voor onderliggende componenten

Gebruik in een diep geneste verzendknop `useFormStatus()` om de status in behandeling van het bovenliggende formulier te lezen zonder props door meerdere lagen door te geven.

'use client';
import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>Submit</button>;
}

Progressieve verbetering

React-acties met serveracties werken zelfs zonder JavaScript (progressieve verbetering). De browser verzendt een standaard-POST-aanvraag van het formulier naar de Next.js-handler, zodat de functie al werkt voordat JavaScript is geladen.

Korte controle

Wat retourneert useActionState waarmee je een laadstatus kunt tonen terwijl een formulieractie wordt uitgevoerd?

Beantwoord dit in de interactieve les

Samenvatting

React-acties zijn asynchrone functies die je doorgeeft aan de actie van een formulier. useActionState verpakt een actie en geeft je een status, een verpakte actie-functie en isPending. Voeg 'use server' toe aan serveracties; die worden op de server uitgevoerd.

Hierna

Volgende les: **useOptimistic voor directe feedback** — je toont optimistische wijzigingen in de gebruikersinterface terwijl een mutatie op de server wordt uitgevoerd.

Gratis beginnen

Leer React met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 88
Lessen: 324

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “React Actions en useActionState” gratis?

Ja — de volledige tekst van “React Actions en useActionState” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus React Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus React Academy bevat in totaal 4 lessen.

Wat leer ik in “React Actions en useActionState”?

Definieer server- en client-actions, verwerk formulierverzendingen en houd pending-statussen bij. Je oefent met React Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met React Academy te beginnen?

Ervaring vooraf is niet nodig. React Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “React Actions en useActionState”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over React Academy?

Ja. Elke les over React Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar React Academy