[React-instantsearch] Switching between indexes gives stale results

We have a couple of indexes that are storing different data.
Depending on the page, we will change our indexName in Searchable to match the appropriate index.

We are finding that when switching from one index to the other, the hits from the previous index are showing under the new index, causing errors for us.

So you may be on the offers page and switching to the Listing page. For a second, hits for Offers are showing under Listings. It fixes itself, not sure how.

My thought is whenever you switch indexName, it would trigger algolia to clear their cache and do a new search with that new index.

One work around we thought might work is if the indexName is different and the objectID is the same, don’t update. Though this doesn’t work because it looks like every new hit is unmounted and mounted, not updated.

Am I understanding this wrong?

I can provide some code but not publicly as it’s an internal project.

1 Like

Hi Peter,

Could you create & share with us a working CodeSandbox example using one of our templates so that we may see the issue mentioned.

When created, clearly describe the steps required to reproduce the issue.

Jason Sooter

Hey Jason,

I can’t share this code as it is an internal project. I can’t share my indices’ and there is only one demo index that is provided by y’all.

The steps to reproduce is just clicking a button that switches the indexName being passed into InstantSearch

I see at this line of code, you do update the aisManager on change of an indexName, why doesn’t it clearCache?

Hi @peter4,

Once the indexName prop change on the InstantSearch component we trigger a new search on the provided index. But we don’t unmount the widgets that are on the page. It means that the state of the search and the internal state of each component is untouched. It can be handy in some cases but with InfiniteHits for example it can leads to some issues: the previous accumulated hits won’t be removed so the list will mix hits of both indices.

This issue is not specific to React InstantSearch but more about React. For React nothing change except the prop indexName so it will try to re-use as much as possible of the current tree. In our case it’s maybe not what we want. We can provide a hint to React about the fact that we want to “refresh” the tree. We can add a key with the value of the indexName on the InstantSearch component. Each time the indexName will change the component will be unmounted / mounted with a blank state (useful if both indices doesn’t share the same kind of records). Here is an example that shows how to do it.

The above solution completely clear the state of the search. It depends on the use case but it might not be the intended behaviour. To switch between different indices and keeping the search state is possible with the SortBy widget. By default the widget displays a select element but you use the connector API to implement your own UI. Here is an example that shows how to leverage connectSortBy to build the same UI.

Hope that helps, let me know if you have questions!


Samuel, you are an absolute lifesaver.

You summed up our problem perfectly, we spent a full day trying to even understand what the problem was. We were able to successfully recreate it but were unable to see a common pattern.

This totally makes sense, all of it. React is just trying to do its job but I wasn’t telling it exactly what to do.

Thanks for all of your help!