Begrip: useActionState

De useActionState hook wordt gebruikt om server actions te koppelen aan formulieren en het resultaat van de action te verwerken.

Deze hook neemt een server action en een initiële state als argument. Het type van de initiële state moet overeenkomen met het type van de return waarde van de form action. De waarde van de initiële state (het tweede argument van de useActionState hook) wordt, via de prevState parameter meegegeven aan de form action. Dit gebeurt natuurlijk enkel de eerste keer dat je de form action oproept want daarna wordt de initiële state overschreven door de returnwaarde van de form action.

De hook geeft een triple terug:

1. Het eerste element bevat de huidige state van de form action. Als de action nog nooit ingezonden is, is dit de initiële state. Als de action al wel ingezonden is, is dit de return waarde van de form action.
2. Het tweede element is een wrapper rond de form action die doorgegeven kan worden aan de action property van een formulier.
3. De laatste waarde is een boolean die aangeeft of de form action momenteel uitgevoerd wordt.

import {FunctionalComponent} from 'react'
import {useActionState} from 'react';

async function increment(previousState: number, formData: FormData): Promise<number> {
  'use server'
  return previousState + formData.get('incrementCount')
}

const formExample: FunctionComponent = () => {
  const [number, formAction, isPending] = useActionState(increment, 0);
  return (
    <>
      <h1>The form has been submitted {number} times</h1>
      <form action={formAction}>
        <input name="incermentCount" type="number"/>  
        <button type="submit" disabled={isPending}>Increment</button>
      </form>
    </>
  )
}