---
title: useOptimisticData
description: >-
  Gets the latest optimistic data with matching optimistic id from actions. Use
  `OptimisticInput` to accept optimistic data in forms.
api_version: 2025-07
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'
---

# use​Optimistic​Data

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

  ##### Description

  This is the default 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>
    );
  }
  ```