Upgrade from Recommend React to React InstantSearch

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:

npm install algoliasearch react-instantsearch
npm uninstall @algolia/recommend-react @algolia/recommend

yarn add algoliasearch react-instantsearch
yarn remove @algolia/recommend-react @algolia/recommend

Imports

Import the Recommend components from React InstantSearch:

React

import { FrequentlyBoughtTogether } from '@algolia/recommend-react'; 
import { FrequentlyBoughtTogether } from 'react-instantsearch'; 

Some imports are no longer available:

The useRecommendations Hook
The Recommend context provider

For more information, see Components and Hooks.

Usage

Recommend widget must be children of the InstantSearch component. Pass the API client and name to the InstantSearch component:

React

- 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`	Prop changes
`RelatedProducts`	`RelatedProducts`	Prop changes
`TrendingItems`	`TrendingItems`	Prop changes
`TrendingFacets`	`TrendingFacets`	Prop changes
`LookingSimilar`	`LookingSimilar`	Prop changes
`Recommend`	Removed	Alternative

Changes for `FrequentlyBoughtTogether`

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

The FrequentlyBoughtTogether component no longer needs recommendClient and indexName props. Instead, pass a searchChlient and the ìndexName to InstantSearch.

React

- 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 component no longer provides children and view props. To fully customize the UI, use either the layoutComponent prop or the useFrequentlyBoughtTogether Hook instead.

Layout

import { FrequentlyBoughtTogether } from '@algolia/recommend-react';

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

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

import { FrequentlyBoughtTogether } from '@algolia/recommend-react';

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

Hook

- 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>;
- }

- 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>;
+ }

Replace `fallbackComponent` with `emptyComponent`

The emptyComponent prop replaces the fallbackComponent prop.

React

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.

React

function Recommendations() {
  return (
    <FrequentlyBoughtTogether
-     maxRecommendations={3}
+     limit={3}
    />
  );
}

Remove `environment`

The environment prop is no longer needed.

React

function Recommendations() {
  return (
    <FrequentlyBoughtTogether
-     environment={global}
    />
  );
}

Replace `classNames`

The classNames keys have changed.

React

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 component no longer needs recommendClient and indexName props. Instead, pass a searchChlient and the ìndexName to <InstantSearch>.

React

- 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 component no longer provides children and view props. To fully customize the UI, use either the layoutComponent prop or the useRelatedProducts Hook instead.

Layout

import { RelatedProducts } from '@algolia/recommend-react';

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

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

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

import { RelatedProducts } from '@algolia/recommend-react';

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

Hook

- 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>;
- }

- 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>;
+ }

Replace `fallbackComponent` with `emptyComponent`

The emptyComponent prop replaces the fallbackComponent prop.

React

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 component now takes an optional maxRecommendations prop which replaces limit.

React

function Recommendations() {
  return (
    <RelatedProducts
-     maxRecommendations={3}
+     limit={3}
    />
  );
}

Remove `environment`

The environment prop is no longer needed.

React

function Recommendations() {
  return (
    <RelatedProducts
-     environment={global}
    />
  );
}

Replace `classNames`

The classNames keys have changed.

React

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 component no longer needs recommendClient and indexName props. Instead, pass a searchChlient and the ìndexName to InstantSearch.

React

- 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 component no longer provides children and view props. To fully customize the UI, use either the layoutComponent prop or the useTrendingItems Hook instead.

Layout

import { TrendingItems } from '@algolia/recommend-react';

  function Recommendations() {
    return (
      <TrendingItems

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

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

import { TrendingItems } from '@algolia/recommend-react';

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

Hook

- 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>;
- }

- 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>;
+ }

Replace `fallbackComponent` with `emptyComponent`

The emptyComponent prop replaces the fallbackComponent prop.

React

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.

React

function Recommendations() {
  return (
    <TrendingItems
-     maxRecommendations={3}
+     limit={3}
    />
  );
}

Remove `environment`

The environment prop is no longer needed.

React

function Recommendations() {
  return (
    <TrendingItems
-     environment={global}
    />
  );
}

Replace `classNames`

The classNames keys have changed.

React

function Recommendations() {
  return (
    <TrendingItems
      classNames={{
        root: 'MyCustomTrendingItems',
+       emptyRoot: 'MyCustomTrendingItems-emptyRoot',
        title: 'MyCustomTrendingItems-title',
        container: 'MyCustomTrendingItems-container',
        list: 'MyCustomTrendingItems-list',
        item: 'MyCustomTrendingItems-item',
      }}
    />
  );
}

Changes for `TrendingFacets`

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

The TrendingFacets component no longer needs recommendClient and indexName props. Instead, pass a searchClient and the indexName to InstantSearch.

React

- import { TrendingFacets } from '@algolia/recommend-react';
+ import { InstantSearch, TrendingFacets } 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">
      <TrendingFacets
        facetName="brand"
-       recommendClient={recommendClient}
-       indexName="YOUR_INDEX_NAME"
      />
+   </InstantSearch>
  );
}

Replace `children` and `view` with the `useTrendingFacets()` Hook

The TrendingFacets component no longer provides children and view props. To fully customize the UI, use the useTrendingFacets Hook instead.

- import { TrendingFacets } from '@algolia/recommend-react';
+ import { useTrendingFacets } from 'react-instantsearch';

  function Recommendations() {
    return (
-     <TrendingFacets facetName="brand">
-       <div>{/* … */}</div>
-     </TrendingFacets>
+     <CustomTrendingFacets facetName="brand" />
    );
  }

+ function CustomTrendingFacets(props) {
+   const { items } = useTrendingFacets(props);
  
+   return <div>{/* … */}</div>;
+ }

- import { TrendingFacets } from '@algolia/recommend-react';
+ import { useTrendingFacets } from 'react-instantsearch';

  function Recommendations() {
    return (
-     <TrendingFacets
-       facetName="brand"
-       view={() => {
-         return <div>{/* … */}</div>;
-       }}
-     />
+     <CustomTrendingFacets facetName="brand" />
    );
  }

+ function CustomTrendingFacets(props) {
+   const { items } = useTrendingFacets(props);
  
+   return <div>{/* … */}</div>;
+ }

Replace `fallbackComponent` with `emptyComponent`

The emptyComponent prop replaces the fallbackComponent prop.

React

function Recommendations() {
  return (
    <TrendingFacets
      facetName="brand"
-     fallbackComponent={() => <p>No trending facets.</p>}
+     emptyComponent={() => <p>No trending facets.</p>}
    />
  );
}

Replace `maxRecommendations` with `limit`

The limit prop replaces the maxRecommendations prop.

React

function Recommendations() {
  return (
    <TrendingFacets
      facetName="brand"
-     maxRecommendations={3}
+     limit={3}
    />
  );
}

Remove `environment`

The environment prop is no longer needed.

React

function Recommendations() {
  return (
    <TrendingFacets
      facetName="brand"
-     environment={global}
    />
  );
}

Replace `classNames`

The classNames keys have changed.

React

function Recommendations() {
  return (
    <TrendingFacets
      facetName="brand"
      classNames={{
        root: 'MyCustomTrendingFacets',
+       emptyRoot: 'MyCustomTrendingFacets-emptyRoot',
        title: 'MyCustomTrendingFacets-title',
        container: 'MyCustomTrendingFacets-container',
        list: 'MyCustomTrendingFacets-list',
        item: 'MyCustomTrendingFacets-item',
      }}
    />
  );
}

Changes for `LookingSimilar`

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

The LookingSimilar component no longer needs recommendClient and indexName props. Instead, pass a searchChlient and the ìndexName to InstantSearch.

React

- 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 component no longer provides children and view props. To fully customize the UI, use either the layoutComponent prop or the useLookingSimilar Hook instead.

Layout

import { LookingSimilar } from '@algolia/recommend-react';

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

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

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

import { LookingSimilar } from '@algolia/recommend-react';

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

Hook

- 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>;
- }

- 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>;
+ }

Replace `fallbackComponent` with `emptyComponent`

The emptyComponent prop replaces the fallbackComponent prop.

React

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.

React

function Recommendations() {
  return (
    <LookingSimilar
-     maxRecommendations={3}
+     limit={3}
    />
  );
}

Remove `environment`

The environment prop is no longer needed.

React

function Recommendations() {
  return (
    <LookingSimilar
-     environment={global}
    />
  );
}

Replace `classNames`

The classNames keys have changed.

React

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`	Prop changes
`useRelatedProducts`	`useRelatedProducts`	Prop changes
`useTrendingItems`	`useTrendingItems`	Prop changes
`useTrendingFacets`	`useTrendingFacets`	Prop changes
`useLookingSimilar`	`useLookingSimilar`	Prop changes
`useRecommendations`	Removed	Alternative

Changes for `useFrequentlyBoughtTogether`

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

The useFrequentlyBoughtTogether Hook no longer needs recommendClient and indexName props. Instead, pass a searchChlient and the ìndexName to InstantSearch.

React

 - 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 Hook returns recommendations under the items key instead of recommendations.

React

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

Changes for `useRelatedProducts`

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

The useRelatedProducts Hook no longer needs recommendClient and indexName props. Instead, pass a searchChlient and the ìndexName to InstantSearch.

React

 - 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 Hook returns recommendations under the items key instead of recommendations.

React

 function CustomRelatedProducts() {
  const {
-   recommendations
+   items
  } = useRelatedProducts();
 }

Changes for `useTrendingItems`

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

The useTrendingItems Hook no longer needs recommendClient and indexName props. Instead, pass a searchChlient and the ìndexName to InstantSearch.

React

 - 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 Hook returns recommendations under the items key instead of recommendations.

React

 function CustomTrendingItems() {
  const {
-   recommendations
+   items
  } = useTrendingItems();
 }

Changes for `useTrendingFacets`

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

The useTrendingFacets Hook no longer needs recommendClient and indexName props. Instead, pass a searchClient and the indexName to InstantSearch.

React

 - import { useTrendingFacets } from '@algolia/recommend-react';
 + import { InstantSearch, useTrendingFacets } 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">
        <CustomTrendingFacets />
 +    </InstantSearch>
    );
 }

 function CustomTrendingFacets() {
  const { items } = useTrendingFacets({
    facetName: 'brand',
-   recommendClient={recommendClient}
-   indexName="YOUR_INDEX_NAME"
  });
 }

Replace `recommendations` with `items`

The useTrendingFacets Hook returns recommendations under the items key instead of recommendations.

React

 function CustomTrendingFacets() {
  const {
-   recommendations
+   items
  } = useTrendingFacets({ facetName: 'brand' });
 }

Changes for `useLookingSimilar`

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

The useLookingSimilar Hook no longer needs recommendClient and indexName props. Instead, pass a searchChlient and the ìndexName to InstantSearch.

React

 - 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 Hook returns recommendations under the items key instead of recommendations.

React

 function CustomLookingSimilar() {
  const {
-   recommendations
+   items
  } = useLookingSimilar();
 }

Alternative for `useRecommendations`

The useRecommendations Hook isn’t available in React InstantSearch. Instead, use the dedicated Hooks for each Recommend model. The Recommend context provider is no longer necessary to batch requests. Remove it from your implementation.

React

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

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>
  );
}

Last modified on July 9, 2026

Upgrade from Recommend JS to InstantSearch.js

Upload events from a CSV file

​Packages

​Imports

​Usage

​Components

​Changes for FrequentlyBoughtTogether

​Move recommendClient and indexName to InstantSearch

​Replace children and view with the layoutComponent prop or the useFrequentlyBoughtTogether Hook

Layout

Hook

​Replace fallbackComponent with emptyComponent

​Replace maxRecommendations with limit

​Remove environment

​Replace classNames

​Changes for RelatedProducts

​Move recommendClient and indexName to InstantSearch

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

Layout

Hook

​Replace fallbackComponent with emptyComponent

​Replace maxRecommendations with limit

​Remove environment

​Replace classNames

​Changes for TrendingItems

​Move recommendClient and indexName to InstantSearch

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

Layout

Hook

​Replace fallbackComponent with emptyComponent

​Replace maxRecommendations with limit

​Remove environment

Replace classNames

​Changes for TrendingFacets

​Move recommendClient and indexName to InstantSearch

​Replace children and view with the useTrendingFacets() Hook

​Replace fallbackComponent with emptyComponent

​Replace maxRecommendations with limit

​Remove environment

​Replace classNames

​Changes for LookingSimilar

​Move recommendClient and indexName to InstantSearch

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

Layout

Hook

​Replace fallbackComponent with emptyComponent

​Replace maxRecommendations with limit

​Remove environment

​Replace classNames

​Hooks

​Changes for useFrequentlyBoughtTogether

​Move recommendClient and indexName to InstantSearch

​Replace recommendations with items

​Changes for useRelatedProducts

​Move recommendClient and indexName to InstantSearch

​Replace recommendations with items

​Changes for useTrendingItems

​Move recommendClient and indexName to InstantSearch

​Replace recommendations with items

​Changes for useTrendingFacets

​Move recommendClient and indexName to InstantSearch

​Replace recommendations with items

​Changes for useLookingSimilar

​Move recommendClient and indexName to InstantSearch

​Replace recommendations with items

​Alternative for useRecommendations

​Remove Recommend context provider

​HorizontalSlider

Packages

Imports

Usage

Components

Changes for `FrequentlyBoughtTogether`

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

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

Replace `fallbackComponent` with `emptyComponent`

Replace `maxRecommendations` with `limit`

Remove `environment`

Replace `classNames`

Changes for `RelatedProducts`

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

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

Replace `fallbackComponent` with `emptyComponent`

Replace `maxRecommendations` with `limit`

Remove `environment`

Replace `classNames`

Changes for `TrendingItems`

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

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

Replace `fallbackComponent` with `emptyComponent`

Replace `maxRecommendations` with `limit`

Remove `environment`

Replace `classNames`

Changes for `TrendingFacets`

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

Replace `children` and `view` with the `useTrendingFacets()` Hook

Replace `fallbackComponent` with `emptyComponent`

Replace `maxRecommendations` with `limit`

Remove `environment`

Replace `classNames`

Changes for `LookingSimilar`

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

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

Replace `fallbackComponent` with `emptyComponent`

Replace `maxRecommendations` with `limit`

Remove `environment`

Replace `classNames`

Hooks

Changes for `useFrequentlyBoughtTogether`

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

Replace `recommendations` with `items`

Changes for `useRelatedProducts`

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

Replace `recommendations` with `items`

Changes for `useTrendingItems`

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

Replace `recommendations` with `items`

Changes for `useTrendingFacets`

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

Replace `recommendations` with `items`

Changes for `useLookingSimilar`

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

Replace `recommendations` with `items`

Alternative for `useRecommendations`

Remove `Recommend` context provider

`HorizontalSlider`