Strange Behaviour with InfinteHits Component

Ok so have an unusual behaviour happening with the InfiniteHits widget.

So for our search page we have added search and filters and also make use of the use-instant-search hook and use-query-params to update the url so visitors can copy the link and share it if required.

The search page also uses 2 separate components to display results based on whether the search is defined. This will then show either a component for single column of results for search or if no search a component 4 columns of tiles for filters.

This all works perfectly within the search page. However when you copy and paste the url with a search param added. Whilst it returns the correct search and uses the correct results component it loses all it’s styling and the wrapping div that should have the class added has it’s class replaced with the ais-InfiniteHits class.

Search applied within search page:
Screenshot 2022-07-06 at 15.05.18
When url is copied into the browser address bar:
Screenshot 2022-07-06 at 15.10.11

This is strange because the InfiniteHits component sits within the wrapper div:

const ResultsBlock = ({ searchQuery }) => {
  return (
    <div className="results-block">
      <SearchStats searchQuery={searchQuery} />
      <InfiniteHits hitComponent={SearchResult} />
    </div>
  );
};

So is there something in this widget that is adding the class to it’s parent component and if so why? Anyone come across this odd behaviour before?

Many thanks for any help on this.

Would you be able to share a sandbox link to a minimal reproduction of the issue? I was not able to reproduce this myself, but it is most likely something project specific and our setups differ in some way. We have some sample data sets you can use, you can also share the link via PM.

We tend to use codesandbox.io - it works well.

This has now been solved. Turns out it was down to the dreaded gatsby rehydration issue. https://blog.logrocket.com/fixing-gatsbys-rehydration-issue/