Hook-ul useActionState în React 19: Mutații Asincrone și Starea Formularului în React & Next.js

import { useActionState } from 'react';

// Funcție asincronă de mutație (primește starea anterioară și obiectul FormData):
async function actualizeazaProfil(stareAnterioara, formData) {
  const nume = formData.get('nume');
  
  if (!nume || nume.trim().length < 3) {
    return { succes: false, eroare: 'Numele trebuie să aibă minimum 3 caractere.' };
  }

  try {
    // Simularea trimiterii către server:
    await new Promise(resolve => setTimeout(resolve, 800));
    return { succes: true, mesaj: `Profil actualizat cu succes pentru ${nume}!` };
  } catch (err) {
    return { succes: false, eroare: 'A apărut o eroare la salvare.' };
  }
}

export default function FormularProfil() {
  const [stare, trimiteActiune, esteInCurs] = useActionState(actualizeazaProfil, {
    succes: false,
    mesaj: '',
    eroare: ''
  });

  return (
    <form action={trimiteActiune}>
      <label htmlFor="nume">Nume complet:</label>
      <input type="text" id="nume" name="nume" disabled={esteInCurs} />

      <button type="submit" disabled={esteInCurs}>
        {esteInCurs ? 'Se salvează datele...' : 'Salvează Profil'}
      </button>

      {stare.eroare && <p className="eroare">{stare.eroare}</p>}
      {stare.succes && <p className="succes">{stare.mesaj}</p>}
    </form>
  );
}