Deep-dive React 19 Actions và useActionState: Đơn giản hóa quản lý Form không cần thư viện ngoài

const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const [data, setData] = useState(null);

import { useActionState } from 'react';

// Hàm action có thể chạy async, nhận state trước đó và FormData
async function updateUsernameAction(previousState: any, formData: FormData) {
  const newName = formData.get('username') as string;
  try {
    const updatedUser = await apiUpdateName(newName);
    return { success: true, user: updatedUser, error: null };
  } catch (err: any) {
    return { success: false, user: null, error: err.message };
  }
}

export function EditProfileForm() {
  const [state, formAction, isPending] = useActionState(updateUsernameAction, null);

  return (
    <form action={formAction} className="space-y-4">
      <input name="username" defaultValue="Nam Hoàng" className="border p-2 rounded" />
      
      <button type="submit" disabled={isPending} className="bg-brand-500 text-white px-4 py-2 rounded">
        {isPending ? 'Đang lưu...' : 'Cập nhật'}
      </button>

      {state?.error && <p className="text-red-500">{state.error}</p>}
      {state?.success && <p className="text-green-500">Đã cập nhật thành công!</p>}
    </form>
  );
}