---
title: OptimisticInput
description: Creates a form input for optimistic UI updates.
api_version: 2026-04
api_name: hydrogen
source_url:
  html: https://shopify.dev/docs/api/hydrogen/2023-10/components/optimisticinput
  md: https://shopify.dev/docs/api/hydrogen/2023-10/components/optimisticinput.md
---

# OptimisticInput

Creates a form input for optimistic UI updates. Use `useOptimisticData` to update the UI with the latest optimistic data.

#### Props

* **data**

  **Record\<string, unknown>**

  **required**

  The data to be stored in the optimistic input. Use for creating an optimistic successful state of this form action.

* **id**

  **string**

  **required**

  A unique identifier for the optimistic input. Use the same identifier in `useOptimisticData` to retrieve the optimistic data from actions.

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>
    );
  }
  ```

***