React InstantSearch - Why isn’t the cache preventing redundant requests to Algolia?

The JavaScript API client caches redundant searches in memory. This avoid sending unnecessary requests to Algolia, and reuses the data you already fetched. If you notice this behavior isn’t working, you might be recreating the search client over every render.

The cache exists at the client instance level, it isn’t shared across different instances. Make sure you create the search client just once.

A typical error is to instantiate the client inside a React component. This causes the code to run for every render. For example, instead of doing:

JSX

function App() {
  const searchClient = algoliasearch();

  return <InstantSearch searchClient={searchClient} />
}

// or

function App() {
  return <InstantSearch searchClient={algoliasearch()} />
}

Make sure to instantiate the client outside of your component tree, and pass it down by reference.

JSX

const searchClient = algoliasearch();

function App() {
  return <InstantSearch searchClient={searchClient} />
}

// or

function App({ appId, apiKey }) {
  // Useful when you need to update the `appId` and `apiKey` at runtime
  // for example when using Secured API keys
  const searchClient = useMemo(() =>
    algoliasearch(appId, apiKey),
    [appId, apiKey]
  );

  return <InstantSearch searchClient={searchClient} />
}

Applies to v2 and later