# useDropAndReplaceUserOperation | @account-kit/react

> Overview of the useDropAndReplaceUserOperation hook from @account-kit/react

> For the complete documentation index, see [llms.txt](/docs/llms.txt).

{/* This file is auto-generated by TypeDoc. Do not edit manually. */}

```ts
function useDropAndReplaceUserOperation<TEntryPointVersion, TAccount>(
  config,
): UseDropAndReplaceUserOperationResult<TEntryPointVersion, TAccount>;
```

Defined in: [account-kit/react/src/hooks/useDropAndReplaceUserOperation.ts:110](https://github.com/alchemyplatform/aa-sdk/blob/main/account-kit/react/src/hooks/useDropAndReplaceUserOperation.ts#L110)

Custom [hook](https://github.com/alchemyplatform/aa-sdk/blob/main/account-kit/react/src/hooks/useDropAndReplaceUserOperation.ts) that handles the drop and replace user operation for a given client and mutation arguments.

## Example

```tsx twoslash
import React from "react";
import {
  useDropAndReplaceUserOperation,
  useSendUserOperation,
  useSmartAccountClient,
} from "@account-kit/react";

export function ComponentWithDropAndReplaceUO() {
  const { client } = useSmartAccountClient({});

  const { sendUserOperationAsync, isSendingUserOperation } =
    useSendUserOperation({
      client,
    });
  const { dropAndReplaceUserOperation, isDroppingAndReplacingUserOperation } =
    useDropAndReplaceUserOperation({
      client,
      onSuccess: ({ hash, request }) => {
        // [optional] Do something with the hash and request
      },
      onError: (error) => {
        // [optional] Do something with the error
      },
      // [optional] ...additional mutationArgs
    });

  return (
    <div>
      <button
        onClick={async () => {
          const { request } = await sendUserOperationAsync({
            uo: {
              target: "0xTARGET_ADDRESS",
              data: "0x",
              value: 0n,
            },
          });

          dropAndReplaceUserOperation({
            uoToDrop: request,
          });
        }}
        disabled={isSendingUserOperation || isDroppingAndReplacingUserOperation}
      >
        {isSendingUserOperation
          ? "Sending..."
          : isDroppingAndReplacingUserOperation
            ? "Replacing..."
            : "Send then Replace UO"}
      </button>
    </div>
  );
}
```

## Type Parameters

<table>
  <thead>
    <tr>
      <th align="left">Type Parameter</th>
      <th align="left">Default type</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        `TEntryPointVersion` *extends* keyof `EntryPointRegistryBase`\<`unknown`>
      </td>

      <td>
        ‐
      </td>
    </tr>

    <tr>
      <td>
        `TAccount` *extends* `SupportedAccounts`
      </td>

      <td>
        `SupportedAccounts`
      </td>
    </tr>

  </tbody>
</table>

## Parameters

<table>
  <thead>
    <tr>
      <th align="left">Parameter</th>
      <th align="left">Type</th>
      <th align="left">Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        `config`
      </td>

      <td>
        [`UseDropAndReplaceUserOperationArgs`](../type-aliases/UseDropAndReplaceUserOperationArgs)\<`TEntryPointVersion`, `TAccount`>
      </td>

      <td>
        The configuration parameters including the client and other mutation arguments. [ref](https://github.com/alchemyplatform/aa-sdk/blob/main/account-kit/react/src/hooks/useDropAndReplaceUserOperation.ts#L23)
      </td>
    </tr>

  </tbody>
</table>

## Returns

[`UseDropAndReplaceUserOperationResult`](../type-aliases/UseDropAndReplaceUserOperationResult)\<`TEntryPointVersion`, `TAccount`>

The result containing the mutation function, result data, loading state, and any error. [ref](https://github.com/alchemyplatform/aa-sdk/blob/main/account-kit/react/src/hooks/useDropAndReplaceUserOperation.ts#L30)