---
title: useSubscription()
description: |-
  Subscribes to the special wrapper type that all "changeable" values in the checkout use. This hook extracts the most recent value from that object, and subscribes to update the value when changes occur in the checkout.

  > Note: > As of version 2025-10, you no longer need this hook. When you access `.value` > (instead of `.current`) on subscribable properties, Preact will automatically > re-render as `.value` changes.
api_version: 2025-10
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/usesubscription()
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/usesubscription().md
---

# use​Subscription()React Hook

Subscribes to the special wrapper type that all "changeable" values in the checkout use. This hook extracts the most recent value from that object, and subscribes to update the value when changes occur in the checkout.

Note

\> As of version 2025-10, you no longer need this hook. When you access `.value` > (instead of `.current`) on subscribable properties, Preact will automatically > re-render as `.value` changes.

## use​Subscription([subscription](#-propertydetail-subscription)​)

### Parameters

* subscription

  SubscribableSignalLike\<Value>

  required

### Returns

* Value

### SubscribableSignalLike

Represents a read-only value managed on the main thread that an extension can subscribe to. Example: Checkout uses this to manage the state of an object and communicate state changes to extensions running in a sandboxed web worker. This interface is compatible with \[Preact's ReadonlySignal]\(https://github.com/preactjs/signals/blob/a023a132a81bd4ba4a0bebb8cbbeffbd8c8bbafc/packages/core/src/index.ts#L700-L709). Some fields are deprecated but still supported for backwards compatibility. In version 2025-10, \[\`StatefulRemoteSubscribable\`]\(https://github.com/Shopify/remote-dom/blob/03929aa8418a89d41d294005f219837582718df8/packages/async-subscription/src/types.ts#L17) was replaced with \`ReadonlySignalLike\`. Checkout will remove the old fields some time in the future.

* current

  ```ts
  T
  ```

* destroy

  ```ts
  () => Promise<void>
  ```

* subscribe

  ```ts
  (fn: (value: T) => void) => () => void
  ```

* value

  ```ts
  T
  ```

```ts
export interface SubscribableSignalLike<T> extends ReadonlySignalLike<T> {
  /**
   * @deprecated Use `.value` instead.
   */
  readonly current: T;
  /**
   * @deprecated No longer needed. Use Preact Signal management instead.
   */
  destroy(): Promise<void>;
}
```

### Examples

* #### Subscribing to changes

  ##### Preact

  ```jsx
  import '@shopify/ui-extensions/preact';
  import {render} from 'preact';

  export default function extension() {
    render(<Extension />, document.body);
  }

  function Extension() {
    // As of version 2025-10, you no longer need the `useSubscription` hook.
    // When you access `.value` on subscribable properties,
    // Preact will automatically re-render as `.value` changes.
    return (
      <s-banner>
        {shopify.cost.totalAmount.value.amount}
      </s-banner>
    );
  }
  ```

## Related

[Reference - Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)

[Reference - Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)

[Reference - Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)

[Learn - Tutorials](https://shopify.dev/apps/checkout)