---
title: "useRecommendation"
slug: "userecommendation"
abstract: "Details of the useRecommendation query hook in Sitecore Search JS SDK for React."
---
# useRecommendation

Use recommendation query hook to request and retrieve data for recommendation widgets.

## Generic response

```js
{
    widgetRef,
    actions: { onItemClick },
    state: { page },
    queryResult: { isLoading, isFetching, data: { content: articles = [] } = {} },
}
```

## Import

```js
import { useRecommendation } from '@sitecore-search/react';
```

## Example

```js
import type { RecommendationInitialState, RecommendationWidgetQuery } from '@sitecore-search/react';
import { WidgetDataType, useRecommendation, widget } from '@sitecore-search/react';

type ArticleModel = {
  id: string;
  name: string;
  author?: string;
  url?: string;
  image_url?: string;
  source_id?: string;
};

type RecommendationProps = {
  title?: string;
  itemsToDisplay?: number;
};

type InitialState = RecommendationInitialState<'itemsPerPage'>;

const DEFAULT_IMG_URL = 'https://placehold.co/500x300?text=No%20Image'; // TODO: Update with corresponding fallback image

export const RecommendationComponent = ({ title = '', itemsToDisplay = 6 }: RecommendationProps) => {
  const {
    widgetRef,
    actions: { onItemClick },
    queryResult: { isLoading, isFetching, data: { content: articles = [] } = {} },
  } = useRecommendation<ArticleModel, InitialState>({
    query: (query:RecommendationWidgetQuery) => query,
    state: {
      itemsPerPage: itemsToDisplay,
    },
  });

  const loading = isLoading || isFetching;

  return ( <div ref={widgetRef}> ... </div> );
};

const RecommendationBasicHorizontalStyledWidget = widget(RecommendationComponent, WidgetDataType.RECOMMENDATION, 'content');
export default RecommendationBasicHorizontalStyledWidget;
```

> [!note]
> Convert a UI component into a widget component before adding it to pages.
>
> To convert a component into a widget component, pass the UI component to the `widget` or `setWidget` function.

> [!note]
> **Notice**
> These React resources can help you with your implementation:
>
> -   To view working examples of widgets, visit the [starter kit website](https://developers.sitecorecloud.io/search-sdk/react/website) built using Search JS SDK and UI components packages.
>
> -   You can download or fork its [GitHub repository](https://github.com/Sitecore/Sitecore-Search-JS-SDK-Starter-Kit/blob/main/README.md).