Skip to main content
The useFrequentlyBoughtTogether hook provides the logic to build a custom component that displays products frequently bought together with a specific product.

​
Import

import { useFrequentlyBoughtTogether } from 'react-instantsearch';

​
Parameters

​
objectIDs
string[]
required
The objectIDs of the products to get recommendations for.
const { items } = useFrequentlyBoughtTogether({
  objectIDs: ['product-123'],
});
​
maxRecommendations
number
Maximum number of recommendations to display.
const { items } = useFrequentlyBoughtTogether({
  objectIDs: ['product-123'],
  maxRecommendations: 5,
});
​
queryParameters
SearchParameters
Additional search parameters to apply.
const { items } = useFrequentlyBoughtTogether({
  objectIDs: ['product-123'],
  queryParameters: {
    filters: 'available:true',
  },
});
​
threshold
number
Minimum score for a recommendation to be included.
​
transformItems
(items: Hit[]) => Hit[]
Function to transform the items.

​
Returns

​
items
Hit[]
The list of recommended products.
const { items } = useFrequentlyBoughtTogether({
  objectIDs: ['product-123'],
});
​
results
SearchResults | undefined
The complete recommendation results from Algolia.

​
Examples

​
Basic Product Recommendations

import { useFrequentlyBoughtTogether } from 'react-instantsearch';

function FrequentlyBoughtTogether({ productId }) {
  const { items } = useFrequentlyBoughtTogether({
    objectIDs: [productId],
    maxRecommendations: 4,
  });

  if (items.length === 0) {
    return null;
  }

  return (
    <div className="recommendations">
      <h3>Frequently Bought Together</h3>
      <div className="product-grid">
        {items.map((item) => (
          <div key={item.objectID} className="product-card">
            <img src={item.image} alt={item.name} />
            <h4>{item.name}</h4>
            <p>${item.price}</p>
            <button>Add to Cart</button>
          </div>
        ))}
      </div>
    </div>
  );
}

​
With Add All to Cart

import { useFrequentlyBoughtTogether } from 'react-instantsearch';

function BuyTogether({ productId }) {
  const { items } = useFrequentlyBoughtTogether({
    objectIDs: [productId],
    maxRecommendations: 3,
  });

  const handleAddAllToCart = () => {
    items.forEach((item) => {
      // Add to cart logic
      console.log('Adding to cart:', item.objectID);
    });
  };

  if (items.length === 0) {
    return null;
  }

  const totalPrice = items.reduce((sum, item) => sum + item.price, 0);

  return (
    <div className="buy-together">
      <h3>Frequently Bought Together</h3>
      <div className="items">
        {items.map((item, index) => (
          <div key={item.objectID}>
            {index > 0 && <span className="plus">+</span>}
            <div className="item">
              <img src={item.image} alt={item.name} />
              <p>{item.name}</p>
              <p>${item.price}</p>
            </div>
          </div>
        ))}
      </div>
      <div className="total">
        <strong>Total: ${totalPrice.toFixed(2)}</strong>
        <button onClick={handleAddAllToCart}>Add All to Cart</button>
      </div>
    </div>
  );
}

​
TypeScript

import { useFrequentlyBoughtTogether } from 'react-instantsearch';
import type { UseFrequentlyBoughtTogetherProps } from 'react-instantsearch';

interface Product {
  objectID: string;
  name: string;
  price: number;
  image: string;
}

function FrequentlyBoughtTogether({ productId }: { productId: string }) {
  const { items } = useFrequentlyBoughtTogether<Product>({
    objectIDs: [productId],
  });

  return (
    <div>
      {items.map((item) => (
        <div key={item.objectID}>{item.name}</div>
      ))}
    </div>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us