Algolia state not updating on first click when using <Index />

Open Q&A
1

Hello!
I am using the react-instantsearch-hooks lib and trying to get routing working multiple indexes. I got stuck with various issues when implementing the routing. So I’m trying another way by using onStateChange and initialUIState in the <InstantSearch /> component

I forked an Algolia demo codesandbox and added onStateChange and initialUIState : recursing-morning-9tq5li - CodeSandbox
It works fine, until I add the <Index /> around the hits. After that, on refresh, the first click doesn’t update the state. If you go here and click Clear Refinements, the first time, it doesn’t remove the refinements from the state, but it does if you click it again. Is this a bug? Or how does it work when using <Index />

Thank you!

2

For others, here is the solution:

The solution is to add the indexId parameter to the index widget. Providing an indexId allows different <Index widgets to target the same Algolia index. It’s especially useful for the routing feature, and lets you find the refinements that match an <Index> widget. More information on this can be found in our multi-index search guide and you can see a working example in this CodeSandBox.

Thanks Algolia!