Ghid Complet de Hooks în React: useState, useEffect, useMemo, useCallback și useActionState în React & Next.js

'use client';

import { useActionState } from 'react';
import { updateUsernameAction } from './actions';

export function ProfileForm({ currentName }: { currentName: string }) {
  // useActionState gestionează automat starea returnată, acțiunea și starea de încărcare (isPending):
  const [state, formAction, isPending] = useActionState(updateUsernameAction, { message: '' });

  return (
    

      
      
        {isPending ? 'Se salvează...' : 'Actualizează Profil'}
      
      {state.message && 
{state.message}
}
    
  );
}