---
title: useOptimisticVariant
description: >-
  The `useOptimisticVariant` takes an existing product variant, processes a
  pending navigation to another product variant, and returns the data of the
  destination variant. This makes switching product options immediate.
api_version: 2025-07
api_name: hydrogen
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen/latest/hooks/useoptimisticvariant'
  md: 'https://shopify.dev/docs/api/hydrogen/latest/hooks/useoptimisticvariant.md'
---

# use​Optimistic​Variant

The `useOptimisticVariant` takes an existing product variant, processes a pending navigation to another product variant, and returns the data of the destination variant. This makes switching product options immediate.

## use​Optimistic​Variant([selectedVariant](#props-propertydetail-selectedvariant)​,[variants](#props-propertydetail-variants)​)

### Parameters

* selectedVariant

  SelectedVariant

  required

  The `selectedVariant` field queried with `variantBySelectedOptions`.

* variants

  Variants

  required

  The available product variants for the product. This can be an array of variants, a promise that resolves to an array of variants, or an object with a `product` key that contains the variants.

### Returns

* OptimisticVariant\<SelectedVariant = OptimisticVariantInput>

  A new product object where the `selectedVariant` property is set to the variant that matches the current URL search params. If no variant is found, the original product object is returned. The `isOptimistic` property is set to `true` if the `selectedVariant` has been optimistically changed.

### OptimisticVariant

```ts
T & {
  isOptimistic?: boolean;
}
```

### OptimisticVariantInput

```ts
any
```

Examples

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```jsx
  import {useLoaderData} from 'react-router';
  import {useOptimisticVariant} from '@shopify/hydrogen';

  export async function loader({context}) {
    return {
      product: await context.storefront.query('/** product query **/'),
      // Note that variants does not need to be awaited to be used by `useOptimisticVariant`
      variants: context.storefront.query('/** variants query **/'),
    };
  }

  function Product() {
    const {product, variants} = useLoaderData();

    // The selectedVariant optimistically changes during page
    // transitions with one of the preloaded product variants
    const selectedVariant = useOptimisticVariant(
      product.selectedVariant,
      variants,
    );

    // @ts-ignore
    return <ProductMain selectedVariant={selectedVariant} />;
  }
  ```

  ##### TypeScript

  ```tsx
  import {useLoaderData} from 'react-router';
  import {LoaderFunctionArgs} from 'react-router';
  import {useOptimisticVariant} from '@shopify/hydrogen';

  export async function loader({context}: LoaderFunctionArgs) {
    return {
      product: await context.storefront.query('/** product query */'),
      // Note that variants does not need to be awaited to be used by `useOptimisticVariant`
      variants: context.storefront.query('/** variants query */'),
    };
  }

  function Product() {
    const {product, variants} = useLoaderData<typeof loader>();

    // The selectedVariant optimistically changes during page
    // transitions with one of the preloaded product variants
    const selectedVariant = useOptimisticVariant(
      product.selectedVariant,
      variants,
    );

    // @ts-ignore
    return <ProductMain selectedVariant={selectedVariant} />;
  }
  ```

## Related

[- VariantSelector](https://shopify.dev/docs/api/hydrogen/components/variantselector)

[- useOptimisticCart](https://shopify.dev/docs/api/hydrogen/hooks/useoptimisticcart)