---
title: useOptimisticCart
description: >-
  The `useOptimisticCart` takes an existing cart object, processes all pending
  cart actions, and locally mutates the cart with optimistic state. An
  optimistic cart makes cart actions immediately render in the browser while
  actions sync to the server. This increases the perceived performance of the
  application.
api_version: 2024-04
api_name: hydrogen
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen/2024-04/hooks/useoptimisticcart'
  md: 'https://shopify.dev/docs/api/hydrogen/2024-04/hooks/useoptimisticcart.md'
---

# use​Optimistic​Cartutility

The `useOptimisticCart` takes an existing cart object, processes all pending cart actions, and locally mutates the cart with optimistic state. An optimistic cart makes cart actions immediately render in the browser while actions sync to the server. This increases the perceived performance of the application.

## use​Optimistic​Cart([cart](#props-propertydetail-cart)​)

### Parameters

* cart

  DefaultCart

  required

  The cart object from `context.cart.get()` returned by a server loader.

### Returns

* OptimisticCart\<DefaultCart = CartReturn>

  A new cart object augmented with optimistic state. Each cart line item that is optimistically added includes an `isOptimistic` property. Also if the cart has *any* optimistic state, a root property `isOptimistic` will be set to `true`.

### OptimisticCart

```ts
T & {
  isOptimistic?: boolean;
  lines: {nodes: Array<CartLine & {isOptimistic?: boolean}>};
}
```

### CartReturn

```ts
Cart & {
  errors?: StorefrontApiErrors;
}
```

### Cart



```ts
Cart
```

### StorefrontApiErrors

```ts
JsonGraphQLError[] | undefined
```

## Related

[- CartForm](https://shopify.dev/docs/api/hydrogen/2024-04/components/cartform)