---
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.
api_version: 2026-04
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/react-hooks/usesubscription
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/react-hooks/usesubscription.md
api_name: checkout-ui-extensions
---

# use​Subscription()

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](#usesubscriptiongeneratedtype-propertydetail-subscription)**​)

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:** \&gt; As of version 2025-10, you no longer need this hook. When you access \<code>.value\</code> \&gt; (instead of \<code>.current\</code>) on subscribable properties, Preact will automatically \&gt; re-render as \<code>.value\</code> changes.

### Parameters

* **subscription**

  **SubscribableSignalLike\<Value>**

  **required**

### Returns

* **Value**

### SubscribableSignalLike

Represents a reactive signal interface that provides both immediate value access and subscription-based updates. Enables real-time synchronization with changing data through the observer pattern. This interface extends \`ReadonlySignalLike\` with deprecated fields that are still supported for backwards compatibility.

* current

  The current value of the signal. Equivalent to \`.value\`, accessing this property subscribes to changes when used in a reactive context.

  ```ts
  T
  ```

* destroy

  Cleans up the subscription and releases any resources held by this signal. After calling \`destroy()\`, the signal stops receiving updates from the main thread.

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

* subscribe

  Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value.

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

* value

  The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup.

  ```ts
  T
  ```

Examples

### Examples

* ####

  ##### Preact

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

***