---
title: useOptimisticData
description: Gets the latest optimistic data with matching optimistic id from actions.
api_version: 2026-04
api_name: hydrogen
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen/latest/hooks/useoptimisticdata'
  md: 'https://shopify.dev/docs/api/hydrogen/latest/hooks/useoptimisticdata.md'
---

# useOptimisticData

Gets the latest optimistic data with matching optimistic id from actions. Use `OptimisticInput` to accept optimistic data in forms.

## use​Optimistic​Data(**[identifier](#props-propertydetail-identifier)**​)

### Parameters

* **identifier**

  **string**

  **required**

Examples

### Examples

* #### Example

  ##### JavaScript

  ```js
  import {CartForm, OptimisticInput, useOptimisticData} from '@shopify/hydrogen';

  export default function Cart({line}) {
    const optimisticId = line.id;
    const optimisticData = useOptimisticData(optimisticId);

    return (
      <div
        style={{
          // Hide the line item if the optimistic data action is remove
          // Do not remove the form from the DOM
          display: optimisticData?.action === 'remove' ? 'none' : 'block',
        }}
      >
        <CartForm
          route="/cart"
          action={CartForm.ACTIONS.LinesRemove}
          inputs={{
            lineIds: [line.id],
          }}
        >
          <button type="submit">Remove</button>
          <OptimisticInput id={optimisticId} data={{action: 'remove'}} />
        </CartForm>
      </div>
    );
  }
  ```

  ##### TypeScript

  ```ts
  import {CartForm, OptimisticInput, useOptimisticData} from '@shopify/hydrogen';
  import {CartLine} from '@shopify/hydrogen-react/storefront-api-types';

  type OptimisticData = {
    action: string;
  };

  export default function Cart({line}: {line: CartLine}) {
    const optimisticId = line.id;
    const optimisticData = useOptimisticData<OptimisticData>(optimisticId);

    return (
      <div
        style={{
          // Hide the line item if the optimistic data action is remove
          // Do not remove the form from the DOM
          display: optimisticData?.action === 'remove' ? 'none' : 'block',
        }}
      >
        <CartForm
          route="/cart"
          action={CartForm.ACTIONS.LinesRemove}
          inputs={{
            lineIds: [line.id],
          }}
        >
          <button type="submit">Remove</button>
          <OptimisticInput id={optimisticId} data={{action: 'remove'}} />
        </CartForm>
      </div>
    );
  }
  ```

***