---
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'
---

# useRecentProducts

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

* 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
  ```

### 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
  ```

* title

  ```ts
  string
  ```

### ProductShop

* id

  ```ts
  string
  ```

* name

  ```ts
  string
  ```

Examples

### Examples

* ####

  ##### 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>
  }
  ```

***