useActionState() și useFormStatus() – Gestiunea Formularelor de Server în Next.js

'use client';
import { useActionState } from 'react';
import { useFormStatus } from 'react-dom';
import { inregistrareUtilizator } from '@/actions/auth';

function ButonTrimite() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Se procesează...' : 'Creare Cont'}
    </button>
  );
}

export function FormularInregistrare() {
  const [state, formAction] = useActionState(inregistrareUtilizator, { error: null });

  return (
    <form action={formAction}>
      <input name="email" type="email" required />
      {state.error && <p className="text-red-500">{state.error}</p>}
      <ButonTrimite />
    </form>
  );
}

Atenție: Componenta care utilizează useFormStatus() trebuie să fie întotdeauna un copil direct sau descendent al elementului <form> pentru a putea citi contextul formularului.