---
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: 2024-10
api_name: hydrogen
source_url:
  html: https://shopify.dev/docs/api/hydrogen/2024-10/hooks/useoptimisticvariant
  md: https://shopify.dev/docs/api/hydrogen/2024-10/hooks/useoptimisticvariant.md
---

# use​Optimistic​Variantcomponent

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
PartialDeep<ProductVariant>
```

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```jsx
  import {useLoaderData} from '@remix-run/react';
  import {defer} from '@remix-run/server-runtime';
  import {useOptimisticVariant} from '@shopify/hydrogen';

  export async function loader({context}) {
    return defer({
      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 '@remix-run/react';
  import {defer, LoaderFunctionArgs} from '@remix-run/server-runtime';
  import {useOptimisticVariant} from '@shopify/hydrogen';

  export async function loader({context}: LoaderFunctionArgs) {
    return defer({
      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

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/hydrogen/2024-10/components/variantselector)

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

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/hydrogen/2024-10/hooks/useoptimisticcart)

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