---
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
```

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```jsx
  import {defer} from '@shopify/remix-oxygen';
  import {Link} from '@remix-run/react';
  import {CartForm, useOptimisticCart} from '@shopify/hydrogen';

  // Root loader returns the cart data
  export async function loader({context}) {
    return defer({
      cart: context.cart.get(),
    });
  }

  // The cart component renders each line item in the cart.
  export function Cart({cart}) {
    // `useOptimisticCart` adds optimistic line items to the cart.
    // These line items are displayed in the cart until the server responds.
    const optimisticCart = useOptimisticCart(cart);

    if (!optimisticCart?.lines?.nodes?.length) return <p>Nothing in cart</p>;

    return optimisticCart.lines.nodes.map((line) => (
      <div key={line.id}>
        <Link to={`/products${line.merchandise.product.handle}`}>
          {line.merchandise.product.title}
        </Link>
        <CartForm
          route="/cart"
          action={CartForm.ACTIONS.LinesRemove}
          inputs={{lineIds: [line.id]}}
        >
          {/* Each line item has an `isOptimistic` property. Optimistic line items
          should have actions disabled */}
          <button type="submit" disabled={!!line.isOptimistic}>
            Remove
          </button>
        </CartForm>
      </div>
    ));
  }
  ```

  ##### TypeScript

  ```tsx
  import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
  import {Link} from '@remix-run/react';
  import {CartForm, OptimisticCart, useOptimisticCart} from '@shopify/hydrogen';
  import type {Cart} from '@shopify/hydrogen-react/storefront-api-types';

  // Root loader returns the cart data
  export async function loader({context}: LoaderFunctionArgs) {
    return defer({
      cart: context.cart.get(),
    });
  }

  // The cart component renders each line item in the cart.
  export function Cart({cart}: {cart: OptimisticCart}) {
    // `useOptimisticCart` adds optimistic line items to the cart.
    // These line items are displayed in the cart until the server responds.
    const optimisticCart = useOptimisticCart(cart);

    if (!optimisticCart?.lines?.nodes?.length) return <p>Nothing in cart</p>;

    return optimisticCart.lines.nodes.map((line) => (
      <div key={line.id}>
        <Link to={`/products${line.merchandise.product.handle}`}>
          {line.merchandise.product.title}
        </Link>
        <CartForm
          route="/cart"
          action={CartForm.ACTIONS.LinesRemove}
          inputs={{lineIds: [line.id]}}
        >
          {/* Each line item has an `isOptimistic` property. Optimistic line items
          should have actions disabled */}
          <button type="submit" disabled={!!line.isOptimistic}>
            Remove
          </button>
        </CartForm>
      </div>
    ));
  }
  ```

## Related

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/hydrogen/2024-04/components/cartform)

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