> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Upgrade from Recommend React to React InstantSearch

> The Recommend widgets are part of React InstantSearch. Learn how you can upgrade from Recommend React.

export const Index = () => <Tooltip tip="An Algolia index is a searchable dataset that consists of records and configuration settings. These settings define how the records are searched and ranked.">
    index
  </Tooltip>;

The components for displaying recommendations are part of React InstantSearch,
starting with version 7.9.0.
The Algolia JavaScript API client supports the Recommend API starting with
version 4.23.2.
With this, you can integrate recommendations seamlessly into your React InstantSearch app, without having to install additional packages.

## Packages

Add the `react-instantsearch` and `algoliasearch` packages to your project,
and remove the `@algolia/recommend` and `@algolia/recommend-js` packages:

<CodeGroup>
  ```sh npm theme={"system"}
  npm install algoliasearch react-instantsearch
  npm uninstall @algolia/recommend-react @algolia/recommend
  ```

  ```sh yarn theme={"system"}
  yarn add algoliasearch react-instantsearch
  yarn remove @algolia/recommend-react @algolia/recommend
  ```
</CodeGroup>

## Imports

Import the Recommend components from React InstantSearch:

```jsx React icon=code theme={"system"}
import { FrequentlyBoughtTogether } from '@algolia/recommend-react'; // [!code --]
import { FrequentlyBoughtTogether } from 'react-instantsearch'; // [!code ++]
```

Some imports are no longer available:

* The `TrendingFacets` component
* The `useTrendingFacets` Hook
* The `useRecommendations` Hook
* The `Recommend` context provider

For more information, see [Components](#components) and [Hooks](#hooks).

## Usage

Recommend widget must be children of the [`InstantSearch`](/doc/api-reference/widgets/instantsearch/react) component.
Pass the API client and <Index /> name to the `InstantSearch` component:

```diff React icon=code theme={"system"}
- import { FrequentlyBoughtTogether } from '@algolia/recommend-react';
+ import { InstantSearch, FrequentlyBoughtTogether } from 'react-instantsearch';
- import recommend from '@algolia/recommend';
+ import algoliasearch from 'algoliasearch/lite';

- const recommendClient = recommend('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');
+ const searchClient = algoliasearch('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');

  function App() {
    return (
+     <InstantSearch
+       searchClient={searchClient}
+       indexName="YOUR_INDEX_NAME"
+     >
        <FrequentlyBoughtTogether
-         recommendClient={recommendClient}
-         indexName="YOUR_INDEX_NAME"
          objectIDs={['5723537']}
        />
+     </InstantSearch>
    );
  }
```

## Components

| Recommend React            | React InstantSearch                                                                       | Changes                                               |
| -------------------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------------------- |
| `FrequentlyBoughtTogether` | [`FrequentlyBoughtTogether`](/doc/api-reference/widgets/frequently-bought-together/react) | [Prop changes](#changes-for-frequentlyboughttogether) |
| `RelatedProducts`          | [`RelatedProducts`](/doc/api-reference/widgets/related-products/react)                    | [Prop changes](#changes-for-relatedproducts)          |
| `TrendingItems`            | [`TrendingItems`](/doc/api-reference/widgets/trending-items/react)                        | [Prop changes](#changes-for-trendingitems)            |
| `TrendingFacets`           | Removed                                                                                   | [Alternative](#alternative-for-trendingfacets)        |
| `LookingSimilar`           | [`LookingSimilar`](/doc/api-reference/widgets/looking-similar/react)                      | [Prop changes](#changes-for-lookingsimilar)           |
| `Recommend`                | Removed                                                                                   | [Alternative](#remove-recommend-context-provider)     |

### Changes for `FrequentlyBoughtTogether`

#### Move `recommendClient` and `indexName` to `InstantSearch`

The [`FrequentlyBoughtTogether`](/doc/api-reference/widgets/frequently-bought-together/react) component no longer needs `recommendClient` and `indexName` props. Instead, pass a `searchChlient` and the `ìndexName` to [`InstantSearch`](/doc/api-reference/widgets/instantsearch/react).

```diff React icon=code theme={"system"}
- import { FrequentlyBoughtTogether } from '@algolia/recommend-react';
+ import { InstantSearch, FrequentlyBoughtTogether } from 'react-instantsearch';
- import recommend from '@algolia/recommend';
+ import algoliasearch from 'algoliasearch/lite';

- const recommendClient = recommend('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');
+ const searchClient = algoliasearch('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');

 function App() {
   return (
+   <InstantSearch searchClient={searchClient} indexName="YOUR_INDEX_NAME">
      <FrequentlyBoughtTogether
-       recommendClient={recommendClient}
-       indexName="YOUR_INDEX_NAME"
      />
+   </InstantSearch>
  );
}
```

#### Replace `children` and `view` with the `layoutComponent` prop or the `useFrequentlyBoughtTogether` Hook

The [`FrequentlyBoughtTogether`](/doc/api-reference/widgets/frequently-bought-together/react) component no longer provides `children` and `view` props.
To fully customize the UI, use either the `layoutComponent` prop or the [`useFrequentlyBoughtTogether`](/doc/api-reference/widgets/frequently-bought-together/react#hook) Hook instead.

##### Layout

<CodeGroup>
  ```diff children theme={"system"}
  import { FrequentlyBoughtTogether } from '@algolia/recommend-react';

    function Recommendations() {
      return (
        <FrequentlyBoughtTogether
          objectIDs={['5723537']}
  -       layoutComponent={() => <div>{/* … */}</div>}
  -     />

  -       <div>{/* … */}</div>
  -     </FrequentlyBoughtTogether>
      );
    }
  ```

  ```diff view theme={"system"}
  import { FrequentlyBoughtTogether } from '@algolia/recommend-react';

    function Recommendations() {
      return (
        <FrequentlyBoughtTogether
          objectIDs={['5723537']}
  -       view={() => {
  +       layoutComponent={() => {
            return <div>{/* … */}</div>;
          }}
        />
      );
    }
  ```
</CodeGroup>

##### Hook

<CodeGroup>
  ```diff children theme={"system"}
  - import { FrequentlyBoughtTogether } from '@algolia/recommend-react';
  + import { useFrequentlyBoughtTogether } from 'react-instantsearch';

    function Recommendations() {
  - const { items } = useFrequentlyBoughtTogether();

      return (

  -     <FrequentlyBoughtTogether objectIDs={['5723537']}>
  -       <div>{/* … */}</div>
  -     </FrequentlyBoughtTogether>
  -     <CustomFrequentlyBoughtTogether objectIDs={['5723537']} />
      );
    }

  - function CustomFrequentlyBoughtTogether(props) {
  - const { items } = useFrequentlyBoughtTogether(props);

  - return <div>{/* … */}</div>;
  - }
  ```

  ```diff view theme={"system"}
  - import { FrequentlyBoughtTogether } from '@algolia/recommend-react';
  + import { useFrequentlyBoughtTogether } from 'react-instantsearch';

    function Recommendations() {
  +   const { items } = useFrequentlyBoughtTogether();

      return (
  -     <FrequentlyBoughtTogether
  -       objectIDs={['5723537']}
  -       view={() => {
  -         return <div>{/* … */}</div>;
  -       }}
  -     />
  +     <CustomFrequentlyBoughtTogether objectIDs={['5723537']} />
      );
    }

  + function CustomFrequentlyBoughtTogether(props) {
  +   const { items } = useFrequentlyBoughtTogether(props);
    
  +   return <div>{/* … */}</div>;
  + }
  ```
</CodeGroup>

#### Replace `fallbackComponent` with `emptyComponent`

The `emptyComponent` prop replaces the `fallbackComponent` prop.

```diff React icon=code theme={"system"}
function Recommendations() {
  return (
    <FrequentlyBoughtTogether
-     fallbackComponent={() => <p>No recommendations.</p>}
+     emptyComponent={() => <p>No recommendations.</p>}
    />
  );
}
```

#### Replace `maxRecommendations` with `limit`

The `limit` prop replaces the `maxRecommendations` prop.

```diff React icon=code theme={"system"}
function Recommendations() {
  return (
    <FrequentlyBoughtTogether
-     maxRecommendations={3}
+     limit={3}
    />
  );
}
```

#### Remove `environment`

The `environment` prop is no longer needed.

```diff React icon=code theme={"system"}
function Recommendations() {
  return (
    <FrequentlyBoughtTogether
-     environment={global}
    />
  );
}
```

#### Replace `classNames`

The `classNames` keys have changed.

```diff React icon=code theme={"system"}
function Recommendations() {
  return (
    <FrequentlyBoughtTogether
      classNames={{
        root: 'MyCustomFrequentlyBoughtTogether',
+       emptyRoot: 'MyCustomFrequentlyBoughtTogether-emptyRoot',
        title: 'MyCustomFrequentlyBoughtTogether-title',
        container: 'MyCustomFrequentlyBoughtTogether-container',
        list: 'MyCustomFrequentlyBoughtTogether-list',
        item: 'MyCustomFrequentlyBoughtTogether-item',
      }}
    />
  );
}
```

### Changes for `RelatedProducts`

#### Move `recommendClient` and `indexName` to `InstantSearch`

The [`RelatedProducts`](/doc/api-reference/widgets/related-products/react) component no longer needs `recommendClient` and `indexName` props. Instead, pass a `searchChlient` and the `ìndexName` to [`<InstantSearch>`](/doc/api-reference/widgets/instantsearch/react).

```diff React icon=code theme={"system"}
- import { RelatedProducts } from '@algolia/recommend-react';
+ import { InstantSearch, RelatedProducts } from 'react-instantsearch';
- import recommend from '@algolia/recommend';
+ import algoliasearch from 'algoliasearch/lite';

- const recommendClient = recommend('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');
+ const searchClient = algoliasearch('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');

 function App() {
   return (
+   <InstantSearch searchClient={searchClient} indexName="YOUR_INDEX_NAME">
      <RelatedProducts
-       recommendClient={recommendClient}
-       indexName="YOUR_INDEX_NAME"
      />
+   </InstantSearch>
  );
}
```

#### Replace `children` and `view` with the `layoutComponent` prop or the useRelatedProducts() Hook

The [`RelatedProducts`](/doc/api-reference/widgets/related-products/react) component no longer provides `children` and `view` props.
To fully customize the UI, use either the `layoutComponent` prop or the [`useRelatedProducts`](/doc/api-reference/widgets/related-products/react#hook) Hook instead.

##### Layout

<CodeGroup>
  ```diff children theme={"system"}
  import { RelatedProducts } from '@algolia/recommend-react';

    function Recommendations() {
      return (
        <RelatedProducts
          objectIDs={['5723537']}

  -       layoutComponent={() => <div>{/* … */}</div>}
  -     />

  -       <div>{/* … */}</div>
  -     </RelatedProducts>
      );
    }

  ```

  ```diff view theme={"system"}
  import { RelatedProducts } from '@algolia/recommend-react';

    function Recommendations() {
      return (
        <RelatedProducts
          objectIDs={['5723537']}
  -       view={() => {
  +       layoutComponent={() => {
            return <div>{/* … */}</div>;
          }}
        />
      );
    }
  ```
</CodeGroup>

##### Hook

<CodeGroup>
  ```diff children theme={"system"}
  - import { RelatedProducts } from '@algolia/recommend-react';
  + import { useRelatedProducts } from 'react-instantsearch';

    function Recommendations() {

  - const { items } = useRelatedProducts();

      return (

  -     <RelatedProducts objectIDs={['5723537']}>
  -       <div>{/* … */}</div>
  -     </RelatedProducts>
  -     <CustomRelatedProducts objectIDs={['5723537']} />
      );
    }

  - function CustomRelatedProducts(props) {
  - const { items } = useRelatedProducts(props);
    
  - return <div>{/* … */}</div>;
  - }

  ```

  ```diff view theme={"system"}
  - import { RelatedProducts } from '@algolia/recommend-react';
  + import { useRelatedProducts } from 'react-instantsearch';

    function Recommendations() {
  +   const { items } = useRelatedProducts();

      return (
  -     <RelatedProducts
  -       objectIDs={['5723537']}
  -       view={() => {
  -         return <div>{/* … */}</div>;
  -       }}
  -     />
  +     <CustomRelatedProducts objectIDs={['5723537']} />
      );
    }

  + function CustomRelatedProducts(props) {
  +   const { items } = useRelatedProducts(props);
    
  +   return <div>{/* … */}</div>;
  + }
  ```
</CodeGroup>

#### Replace `fallbackComponent` with `emptyComponent`

The `emptyComponent` prop replaces the `fallbackComponent` prop.

```diff React icon=code theme={"system"}
function Recommendations() {
  return (
    <RelatedProducts
-     fallbackComponent={() => <p>No recommendations.</p>}
+     emptyComponent={() => <p>No recommendations.</p>}
    />
  );
}
```

#### Replace `maxRecommendations` with `limit`

The `limit` prop replaces the `maxRecommendations` prop.

The [`RelatedProducts`](/doc/api-reference/widgets/related-products/react) component now takes an optional `maxRecommendations` prop which replaces `limit`.

```diff React icon=code theme={"system"}
function Recommendations() {
  return (
    <RelatedProducts
-     maxRecommendations={3}
+     limit={3}
    />
  );
}
```

#### Remove `environment`

The `environment` prop is no longer needed.

```diff React icon=code theme={"system"}
function Recommendations() {
  return (
    <RelatedProducts
-     environment={global}
    />
  );
}
```

#### Replace `classNames`

The `classNames` keys have changed.

```diff React icon=code theme={"system"}
function Recommendations() {
  return (
    <RelatedProducts
      classNames={{
        root: 'MyCustomRelatedProducts',
+       emptyRoot: 'MyCustomRelatedProducts-emptyRoot',
        title: 'MyCustomRelatedProducts-title',
        container: 'MyCustomRelatedProducts-container',
        list: 'MyCustomRelatedProducts-list',
        item: 'MyCustomRelatedProducts-item',
      }}
    />
  );
}
```

### Changes for `TrendingItems`

#### Move `recommendClient` and `indexName` to `InstantSearch`

The [`TrendingItems`](/doc/api-reference/widgets/trending-items/react) component no longer needs `recommendClient` and `indexName` props.
Instead, pass a `searchChlient` and the `ìndexName` to [`InstantSearch`](/doc/api-reference/widgets/instantsearch/react).

```diff React icon=code theme={"system"}
- import { TrendingItems } from '@algolia/recommend-react';
+ import { InstantSearch, TrendingItems } from 'react-instantsearch';
- import recommend from '@algolia/recommend';
+ import algoliasearch from 'algoliasearch/lite';

- const recommendClient = recommend('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');
+ const searchClient = algoliasearch('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');

 function App() {
   return (
+   <InstantSearch searchClient={searchClient} indexName="YOUR_INDEX_NAME">
      <TrendingItems
-       recommendClient={recommendClient}
-       indexName="YOUR_INDEX_NAME"
      />
+   </InstantSearch>
  );
}
```

#### Replace `children` and `view` with the `layoutComponent` prop or the useTrendingItems() Hook

The [`TrendingItems`](/doc/api-reference/widgets/trending-items/react) component no longer provides `children` and `view` props.
To fully customize the UI, use either the `layoutComponent` prop or the [`useTrendingItems`](/doc/api-reference/widgets/trending-items/react#hook) Hook instead.

##### Layout

<CodeGroup>
  ```diff children theme={"system"}
  import { TrendingItems } from '@algolia/recommend-react';

    function Recommendations() {
      return (
        <TrendingItems

  -       layoutComponent={() => <div>{/* … */}</div>}
  -     />

  -       <div>{/* … */}</div>
  -     </TrendingItems>
      );
    }

  ```

  ```diff view theme={"system"}
  import { TrendingItems } from '@algolia/recommend-react';

    function Recommendations() {
      return (
        <TrendingItems
  -       view={() => {
  +       layoutComponent={() => {
            return <div>{/* … */}</div>;
          }}
        />
      );
    }
  ```
</CodeGroup>

##### Hook

<CodeGroup>
  ```diff children theme={"system"}
  - import { TrendingItems } from '@algolia/recommend-react';
  + import { useTrendingItems } from 'react-instantsearch';

    function Recommendations() {

  - const { items } = useTrendingItems();

      return (

  -     <TrendingItems>
  -       <div>{/* … */}</div>
  -     </TrendingItems>
  -     <CustomTrendingItems />
      );
    }

  - function CustomTrendingItems(props) {
  - const { items } = useTrendingItems(props);
    
  - return <div>{/* … */}</div>;
  - }

  ```

  ```diff view theme={"system"}
  - import { TrendingItems } from '@algolia/recommend-react';
  + import { useTrendingItems } from 'react-instantsearch';

    function Recommendations() {
  +   const { items } = useTrendingItems();

      return (
  -     <TrendingItems
  -       view={() => {
  -         return <div>{/* … */}</div>;
  -       }}
  -     />
  +     <CustomTrendingItems />
      );
    }

  + function CustomTrendingItems(props) {
  +   const { items } = useTrendingItems(props);
    
  +   return <div>{/* … */}</div>;
  + }
  ```
</CodeGroup>

#### Replace `fallbackComponent` with `emptyComponent`

The `emptyComponent` prop replaces the `fallbackComponent` prop.

```diff React icon=code theme={"system"}
function Recommendations() {
  return (
    <TrendingItems
-     fallbackComponent={() => <p>No recommendations.</p>}
+     emptyComponent={() => <p>No recommendations.</p>}
    />
  );
}
```

#### Replace `maxRecommendations` with `limit`

The `limit` prop replaces the `maxRecommendations` prop.

```diff React icon=code theme={"system"}
function Recommendations() {
  return (
    <TrendingItems
-     maxRecommendations={3}
+     limit={3}
    />
  );
}
```

#### Remove `environment`

The `environment` prop is no longer needed.

```diff React icon=code theme={"system"}
function Recommendations() {
  return (
    <TrendingItems
-     environment={global}
    />
  );
}
```

##### Replace `classNames`

The `classNames` keys have changed.

```diff React icon=code theme={"system"}
function Recommendations() {
  return (
    <TrendingItems
      classNames={{
        root: 'MyCustomTrendingItems',
+       emptyRoot: 'MyCustomTrendingItems-emptyRoot',
        title: 'MyCustomTrendingItems-title',
        container: 'MyCustomTrendingItems-container',
        list: 'MyCustomTrendingItems-list',
        item: 'MyCustomTrendingItems-item',
      }}
    />
  );
}
```

### Alternative for `TrendingFacets`

The `TrendingFacets` component isn't available in React InstantSearch.
If you need it, use the [`TrendingFacets` component](https://algolia.com/old-docs/deprecated/recommend/api-reference/recommend-react/TrendingFacets/) from the deprecated Recommend React library.

### Changes for `LookingSimilar`

#### Move `recommendClient` and `indexName` to `InstantSearch`

The [`LookingSimilar`](/doc/api-reference/widgets/looking-similar/react) component no longer needs `recommendClient` and `indexName` props.
Instead, pass a `searchChlient` and the `ìndexName` to [`InstantSearch`](/doc/api-reference/widgets/instantsearch/react).

```diff React icon=code theme={"system"}
- import { LookingSimilar } from '@algolia/recommend-react';
+ import { InstantSearch, LookingSimilar } from 'react-instantsearch';
- import recommend from '@algolia/recommend';
+ import algoliasearch from 'algoliasearch/lite';

- const recommendClient = recommend('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');
+ const searchClient = algoliasearch('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');

 function App() {
   return (
+   <InstantSearch searchClient={searchClient} indexName="YOUR_INDEX_NAME">
      <LookingSimilar
-       recommendClient={recommendClient}
-       indexName="YOUR_INDEX_NAME"
      />
+   </InstantSearch>
  );
}
```

#### Replace `children` and `view` with the `layoutComponent` prop or the useLookingSimilar() Hook

The [`LookingSimilar`](/doc/api-reference/widgets/looking-similar/react) component no longer provides `children` and `view` props.
To fully customize the UI, use either the `layoutComponent` prop or the [`useLookingSimilar`](/doc/api-reference/widgets/looking-similar/react#hook) Hook instead.

##### Layout

<CodeGroup>
  ```diff children theme={"system"}
  import { LookingSimilar } from '@algolia/recommend-react';

    function Recommendations() {
      return (
        <LookingSimilar
          objectIDs={['5723537']}

  -       layoutComponent={() => <div>{/* … */}</div>}
  -     />

  -       <div>{/* … */}</div>
  -     </LookingSimilar>
      );
    }

  ```

  ```diff view theme={"system"}
  import { LookingSimilar } from '@algolia/recommend-react';

    function Recommendations() {
      return (
        <LookingSimilar
          objectIDs={['5723537']}
  -       view={() => {
  +       layoutComponent={() => {
            return <div>{/* … */}</div>;
          }}
        />
      );
    }
  ```
</CodeGroup>

##### Hook

<CodeGroup>
  ```diff children theme={"system"}
  - import { LookingSimilar } from '@algolia/recommend-react';
  + import { useLookingSimilar } from 'react-instantsearch';

    function Recommendations() {

  - const { items } = useLookingSimilar();

      return (

  -     <LookingSimilar objectIDs={['5723537']}>
  -       <div>{/* … */}</div>
  -     </LookingSimilar>
  -     <CustomLookingSimilar objectIDs={['5723537']} />
      );
    }

  - function CustomLookingSimilar(props) {
  - const { items } = useLookingSimilar(props);
    
  - return <div>{/* … */}</div>;
  - }

  ```

  ```diff view theme={"system"}
  - import { LookingSimilar } from '@algolia/recommend-react';
  + import { useLookingSimilar } from 'react-instantsearch';

    function Recommendations() {
  +   const { items } = useLookingSimilar();

      return (
  -     <LookingSimilar
  -       objectIDs={['5723537']}
  -       view={() => {
  -         return <div>{/* … */}</div>;
  -       }}
  -     />
  +     <CustomLookingSimilar objectIDs={['5723537']} />
      );
    }

  + function CustomLookingSimilar(props) {
  +   const { items } = useLookingSimilar(props);
    
  +   return <div>{/* … */}</div>;
  + }
  ```
</CodeGroup>

#### Replace `fallbackComponent` with `emptyComponent`

The `emptyComponent` prop replaces the `fallbackComponent` prop.

```diff React icon=code theme={"system"}
function Recommendations() {
  return (
    <LookingSimilar
-     fallbackComponent={() => <p>No recommendations.</p>}
+     emptyComponent={() => <p>No recommendations.</p>}
    />
  );
}
```

#### Replace `maxRecommendations` with `limit`

The `limit` prop replaces the `maxRecommendations` prop.

```diff React icon=code theme={"system"}
function Recommendations() {
  return (
    <LookingSimilar
-     maxRecommendations={3}
+     limit={3}
    />
  );
}
```

#### Remove `environment`

The `environment` prop is no longer needed.

```diff React icon=code theme={"system"}
function Recommendations() {
  return (
    <LookingSimilar
-     environment={global}
    />
  );
}
```

#### Replace `classNames`

The `classNames` keys have changed.

```diff React icon=code theme={"system"}
function Recommendations() {
  return (
    <LookingSimilar
      classNames={{
        root: 'MyCustomLookingSimilar',
+       emptyRoot: 'MyCustomLookingSimilar-emptyRoot',
        title: 'MyCustomLookingSimilar-title',
        container: 'MyCustomLookingSimilar-container',
        list: 'MyCustomLookingSimilar-list',
        item: 'MyCustomLookingSimilar-item',
      }}
    />
  );
}
```

## Hooks

| Recommend React               | React InstantSearch                                                                               | Changes                                                  |
| ----------------------------- | ------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
| `useFrequentlyBoughtTogether` | [`useFrequentlyBoughtTogether`](/doc/api-reference/widgets/frequently-bought-together/react#hook) | [Prop changes](#changes-for-usefrequentlyboughttogether) |
| `useRelatedProducts`          | [`useRelatedProducts`](/doc/api-reference/widgets/related-products/react#hook)                    | [Prop changes](#changes-for-userelatedproducts)          |
| `useTrendingItems`            | [`useTrendingItems`](/doc/api-reference/widgets/trending-items/react#hook)                        | [Prop changes](#changes-for-usetrendingitems)            |
| `useTrendingFacets`           | Removed                                                                                           | [Alternative](#alternative-for-usetrendingfacets)        |
| `useLookingSimilar`           | [`useLookingSimilar`](/doc/api-reference/widgets/looking-similar/react#hook)                      | [Prop changes](#changes-for-uselookingsimilar)           |
| `useRecommendations`          | Removed                                                                                           | [Alternative](#alternative-for-userecommendations)       |

### Changes for `useFrequentlyBoughtTogether`

#### Move `recommendClient` and `indexName` to `InstantSearch`

The [`useFrequentlyBoughtTogether`](/doc/api-reference/widgets/frequently-bought-together/react#hook) Hook no longer needs `recommendClient` and `indexName` props.
Instead, pass a `searchChlient` and the `ìndexName` to [`InstantSearch`](/doc/api-reference/widgets/instantsearch/react).

```diff React icon=code theme={"system"}
 - import { useFrequentlyBoughtTogether } from '@algolia/recommend-react';
 + import { InstantSearch, useFrequentlyBoughtTogether } from 'react-instantsearch';
 - import recommend from '@algolia/recommend';
 + import algoliasearch from 'algoliasearch/lite';

 - const recommendClient = recommend('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');
 + const searchClient = algoliasearch('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');

  function App() {
    return (
 +    <InstantSearch searchClient={searchClient} indexName="YOUR_INDEX_NAME">
        <CustomFrequentlyBoughtTogether />
 +    </InstantSearch>
    );
 }

 function CustomFrequentlyBoughtTogether() {
  const { items } = useFrequentlyBoughtTogether({
-   recommendClient={recommendClient}
-   indexName="YOUR_INDEX_NAME"
  });
 }
```

#### Replace `recommendations` with `items`

The [`useFrequentlyBoughtTogether`](/doc/api-reference/widgets/frequently-bought-together/react#hook) Hook returns recommendations under the `items` key instead of `recommendations`.

```diff React icon=code theme={"system"}
 function CustomFrequentlyBoughtTogether() {
  const {
-   recommendations
+   items
  } = useFrequentlyBoughtTogether();
 }
```

### Changes for `useRelatedProducts`

#### Move `recommendClient` and `indexName` to `InstantSearch`

The [`useRelatedProducts`](/doc/api-reference/widgets/related-products/react#hook) Hook no longer needs `recommendClient` and `indexName` props.
Instead, pass a `searchChlient` and the `ìndexName` to [`InstantSearch`](/doc/api-reference/widgets/instantsearch/react).

```diff React icon=code theme={"system"}
 - import { useRelatedProducts } from '@algolia/recommend-react';
 + import { InstantSearch, useRelatedProducts } from 'react-instantsearch';
 - import recommend from '@algolia/recommend';
 + import algoliasearch from 'algoliasearch/lite';

 - const recommendClient = recommend('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');
 + const searchClient = algoliasearch('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');

  function App() {
    return (
 +    <InstantSearch searchClient={searchClient} indexName="YOUR_INDEX_NAME">
        <CustomRelatedProducts />
 +    </InstantSearch>
    );
 }

 function CustomRelatedProducts() {
  const { items } = useRelatedProducts({
-   recommendClient={recommendClient}
-   indexName="YOUR_INDEX_NAME"
  });
 }
```

#### Replace `recommendations` with `items`

The [`useRelatedProducts`](/doc/api-reference/widgets/related-products/react#hook) Hook returns recommendations under the `items` key instead of `recommendations`.

```diff React icon=code theme={"system"}
 function CustomRelatedProducts() {
  const {
-   recommendations
+   items
  } = useRelatedProducts();
 }
```

### Changes for `useTrendingItems`

#### Move `recommendClient` and `indexName` to `InstantSearch`

The [`useTrendingItems`](/doc/api-reference/widgets/trending-items/react#hook) Hook no longer needs `recommendClient` and `indexName` props.
Instead, pass a `searchChlient` and the `ìndexName` to [`InstantSearch`](/doc/api-reference/widgets/instantsearch/react).

```diff React icon=code theme={"system"}
 - import { useTrendingItems } from '@algolia/recommend-react';
 + import { InstantSearch, useTrendingItems } from 'react-instantsearch';
 - import recommend from '@algolia/recommend';
 + import algoliasearch from 'algoliasearch/lite';

 - const recommendClient = recommend('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');
 + const searchClient = algoliasearch('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');

  function App() {
    return (
 +    <InstantSearch searchClient={searchClient} indexName="YOUR_INDEX_NAME">
        <CustomTrendingItems />
 +    </InstantSearch>
    );
 }

 function CustomTrendingItems() {
  const { items } = useTrendingItems({
-   recommendClient={recommendClient}
-   indexName="YOUR_INDEX_NAME"
  });
 }
```

#### Replace `recommendations` with `items`

The [`useTrendingItems`](/doc/api-reference/widgets/trending-items/react#hook) Hook returns recommendations under the `items` key instead of `recommendations`.

```diff React icon=code theme={"system"}
 function CustomTrendingItems() {
  const {
-   recommendations
+   items
  } = useTrendingItems();
 }
```

### Alternative for `useTrendingFacets`

The `useTrendingFacets` Hook isn't available in React InstantSearch.
If you need it, use the [`useTrendingFacets` Hook](https://algolia.com/old-docs/deprecated/recommend/api-reference/recommend-react/useTrendingFacets/) from the deprecated Recommend React library.

### Alternative for `useRecommendations`

The `useRecommendations` Hook isn't available in React InstantSearch.
Instead, use the [dedicated Hooks](#hooks) for each Recommend model.

### Changes for `useLookingSimilar`

#### Move `recommendClient` and `indexName` to `InstantSearch`

The [`useLookingSimilar`](/doc/api-reference/widgets/looking-similar/react#hook) Hook no longer needs `recommendClient` and `indexName` props.
Instead, pass a `searchChlient` and the `ìndexName` to [`InstantSearch`](/doc/api-reference/widgets/instantsearch/react).

```diff React icon=code theme={"system"}
 - import { useLookingSimilar } from '@algolia/recommend-react';
 + import { InstantSearch, useLookingSimilar } from 'react-instantsearch';
 - import recommend from '@algolia/recommend';
 + import algoliasearch from 'algoliasearch/lite';

 - const recommendClient = recommend('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');
 + const searchClient = algoliasearch('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');

  function App() {
    return (
 +    <InstantSearch searchClient={searchClient} indexName="YOUR_INDEX_NAME">
        <CustomLookingSimilar />
 +    </InstantSearch>
    );
 }

 function CustomLookingSimilar() {
  const { items } = useLookingSimilar({
-   recommendClient={recommendClient}
-   indexName="YOUR_INDEX_NAME"
  });
 }
```

#### Replace `recommendations` with `items`

The [`useLookingSimilar`](/doc/api-reference/widgets/looking-similar/react#hook) Hook returns recommendations under the `items` key instead of `recommendations`.

```diff React icon=code theme={"system"}
 function CustomLookingSimilar() {
  const {
-   recommendations
+   items
  } = useLookingSimilar();
 }
```

### Remove `Recommend` context provider

The `Recommend` context provider is no longer necessary to batch requests.
Remove it from your implementation.

```diff React icon=code theme={"system"}
- import { Recommend } from '@algolia/recommend-react';

  function App() {
    return (
-     <Recommend recommendClient={recommendClient}>
        {/* … */}
-     </Recommend>
    );
  }
```

### `HorizontalSlider`

The `HorizontalSlider` component is now available in React InstantSearch as the `Carousel` component.

For `Carousel` props, check the API reference:

* [`FrequentlyBoughtTogether`](/doc/api-reference/widgets/frequently-bought-together/react#param-layout-component)
* [`RelatedProducts`](/doc/api-reference/widgets/related-products/react#param-layout-component)
* [`TrendingItems`](/doc/api-reference/widgets/trending-items/react#param-layout-component)
* [`LookingSimilar`](/doc/api-reference/widgets/looking-similar/react#param-layout-component)

```jsx theme={"system"}
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, FrequentlyBoughtTogether, Carousel } from 'react-instantsearch';

const searchClient = algoliasearch('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');

function App() {
  return (
    <InstantSearch
      searchClient={searchClient}
      indexName="YOUR_INDEX_NAME"
    >
      <FrequentlyBoughtTogether
        objectIDs={['5723537']}
        layoutComponent={Carousel}
      />
    </InstantSearch>
  );
}
```