---
title: useRecentProducts
description: >-
  The useRecentProducts hook fetches products the user recently viewed in the
  Shop app, ordered by recency.
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/hooks/user/userecentproducts'
  md: 'https://shopify.dev/docs/api/shop-minis/hooks/user/userecentproducts.md'
api_name: shop-minis
---

# use​Recent​Products

The `useRecentProducts` hook fetches products the user recently viewed in the Shop app, ordered by recency. You can use this to create 'Continue Shopping' sections or personalized product recommendations based on browsing history.

## use​Recent​Products(**[params](#userecentproductsgeneratedtype-propertydetail-params)**​)

### Parameters

* **params**

  **UseRecentProductsParams**

### Returns

* **UseRecentProductsReturns**

### UseRecentProductsParams

* fetchPolicy

  ```ts
  DataHookFetchPolicy
  ```

* first

  ```ts
  number
  ```

* includeSensitive

  ```ts
  boolean
  ```

* skip

  ```ts
  boolean
  ```

### DataHookFetchPolicy

```ts
'cache-first' | 'network-only'
```

### UseRecentProductsReturns

* error

  ```ts
  Error | null
  ```

* fetchMore

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

* hasNextPage

  ```ts
  boolean
  ```

* loading

  ```ts
  boolean
  ```

* products

  ```ts
  Product[] | null
  ```

* refetch

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

### Product

* compareAtPrice

  ```ts
  Money | null
  ```

* defaultVariantId

  ```ts
  string
  ```

* featuredImage

  ```ts
  ProductImage | null
  ```

* id

  ```ts
  string
  ```

* isFavorited

  ```ts
  boolean
  ```

* options

  The product's configurable options (e.g. Color, Size). Optional for backwards compatibility with products returned by older Shop app hosts; treat as \`\[]\` when undefined.

  ```ts
  ProductOption[]
  ```

* price

  ```ts
  Money
  ```

* referral

  ```ts
  boolean
  ```

* reviewAnalytics

  ```ts
  { averageRating?: number; reviewCount?: number; }
  ```

* selectedVariant

  ```ts
  ProductVariant
  ```

* shop

  ```ts
  ProductShop
  ```

* title

  ```ts
  string
  ```

* variants

  ```ts
  ProductVariant[]
  ```

### Money

* amount

  ```ts
  Decimal
  ```

* currencyCode

  ```ts
  CurrencyCode
  ```

### Decimal

```ts
string
```

### CurrencyCode

```ts
'AED' | 'AFN' | 'ALL' | 'AMD' | 'ANG' | 'AOA' | 'ARS' | 'AUD' | 'AWG' | 'AZN' | 'BAM' | 'BBD' | 'BDT' | 'BGN' | 'BHD' | 'BIF' | 'BMD' | 'BND' | 'BOB' | 'BRL' | 'BSD' | 'BTN' | 'BWP' | 'BYN' | 'BYR' | 'BZD' | 'CAD' | 'CDF' | 'CHF' | 'CLP' | 'CNY' | 'COP' | 'CRC' | 'CVE' | 'CZK' | 'DJF' | 'DKK' | 'DOP' | 'DZD' | 'EGP' | 'ERN' | 'ETB' | 'EUR' | 'FJD' | 'FKP' | 'GBP' | 'GEL' | 'GHS' | 'GIP' | 'GMD' | 'GNF' | 'GTQ' | 'GYD' | 'HKD' | 'HNL' | 'HRK' | 'HTG' | 'HUF' | 'IDR' | 'ILS' | 'INR' | 'IQD' | 'IRR' | 'ISK' | 'JEP' | 'JMD' | 'JOD' | 'JPY' | 'KES' | 'KGS' | 'KHR' | 'KID' | 'KMF' | 'KRW' | 'KWD' | 'KYD' | 'KZT' | 'LAK' | 'LBP' | 'LKR' | 'LRD' | 'LSL' | 'LTL' | 'LVL' | 'LYD' | 'MAD' | 'MDL' | 'MGA' | 'MKD' | 'MMK' | 'MNT' | 'MOP' | 'MRU' | 'MUR' | 'MVR' | 'MWK' | 'MXN' | 'MYR' | 'MZN' | 'NAD' | 'NGN' | 'NIO' | 'NOK' | 'NPR' | 'NZD' | 'OMR' | 'PAB' | 'PEN' | 'PGK' | 'PHP' | 'PKR' | 'PLN' | 'PYG' | 'QAR' | 'RON' | 'RSD' | 'RUB' | 'RWF' | 'SAR' | 'SBD' | 'SCR' | 'SDG' | 'SEK' | 'SGD' | 'SHP' | 'SLL' | 'SOS' | 'SRD' | 'SSP' | 'STD' | 'STN' | 'SYP' | 'SZL' | 'THB' | 'TJS' | 'TMT' | 'TND' | 'TOP' | 'TRY' | 'TTD' | 'TWD' | 'TZS' | 'UAH' | 'UGX' | 'USD' | 'UYU' | 'UZS' | 'VED' | 'VEF' | 'VES' | 'VND' | 'VUV' | 'WST' | 'XAF' | 'XCD' | 'XOF' | 'XPF' | 'XXX' | 'YER' | 'ZAR' | 'ZMW'
```

### ProductImage

* altText

  ```ts
  string | null
  ```

* height

  ```ts
  number | null
  ```

* id

  ```ts
  string | null
  ```

* sensitive

  ```ts
  boolean | null
  ```

* thumbhash

  ```ts
  string | null
  ```

* url

  ```ts
  string
  ```

* width

  ```ts
  number | null
  ```

### ProductOption

A configurable product option (e.g. Color, Size) and the set of values it accepts across all variants.

* id

  Globally-unique identifier for the option.

  ```ts
  string
  ```

* name

  The display name of the option. E.g. \`Color\`.

  ```ts
  string
  ```

* values

  All possible values for the option across variants. E.g. \`\['Red', 'Blue']\`.

  ```ts
  string[]
  ```

### ProductVariant

* availableForSale

  Whether the variant can be purchased. When \`false\`, calls to add the variant to cart or buy it through the SDK will fail. UI should be gated on this flag. May be \`undefined\` if the variant was sourced from an API that does not expose stock state.

  ```ts
  boolean
  ```

* compareAtPrice

  ```ts
  Money | null
  ```

* id

  ```ts
  string
  ```

* image

  ```ts
  ProductImage | null
  ```

* isFavorited

  ```ts
  boolean
  ```

* price

  ```ts
  Money
  ```

* selectedOptions

  The (name, value) pairs of product options this variant corresponds to. E.g. \`\[{name: 'Color', value: 'Green'}, {name: 'Size', value: 'M'}]\`. Optional for backwards compatibility with variants returned by older Shop app hosts; treat as \`\[]\` when undefined.

  ```ts
  ProductSelectedOption[]
  ```

* title

  ```ts
  string
  ```

### ProductSelectedOption

A single (name, value) pair that identifies which value of a product option a variant corresponds to. E.g. \`{name: 'Color', value: 'Green'}\`.

* name

  ```ts
  string
  ```

* value

  ```ts
  string
  ```

### ProductShop

* id

  ```ts
  string
  ```

* name

  ```ts
  string
  ```

### Examples

* #### Example code

  ##### tsx

  ```tsx
  import {useEffect} from 'react'

  import {useRecentProducts, Button} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    const {products, fetchMore} = useRecentProducts({first: 10})

    useEffect(() => {
      console.log(products)
    }, [products])

    return <Button onClick={fetchMore}>Fetch more</Button>
  }
  ```

***