`connectStateResults` does not provide up-to-date values in server side rendering

Describe the bug 🐛

In some cases, connectStateResults does not provide the correct up-to-date values.

To Reproduce 🔍

Unfortunately, it’s not possible for me to give a working example here. But the flow is as follow:

• The user lands on the search page.
• They see a list of results L1.
• They update and submit a new query.
• They do see the list of results L2. In the network tab, the request fired to Algolia API works successfully. But because connectStateResults is not correctly updated, searching remains true - and, in our implementation, the spinner keeps spinning, on top of several other unwanted side-effects. The provided searchResults is also not correctly updated.

Expected behavior 💭

connectStateResults should always provide the latest values. There should not be a difference between the provided searchResults.hits and the hits provided by connectHits, for instance. Nor there should be a difference between the provided searchState.query and searchResults.query.

Environment:

• OS: MacOS
• Browser: Chrome
• Version: 88

Additional context

We’re using the latest 6.10.0 version of both react-instantsearch-core and react-instantsearch-dom.

We’re using the following connectors:

• connectSearchBox. When submitting the search query, I’m calling the provided refine method with the query.
• connectHits. The hits are always up to date, there is absolutely no issue there.
• connectStateResults. Somehow, when using the React inspector, we can see that:
  • searchState is up to date. It contains the latest query.
  • searching sometimes remains true until a new search query is fired.
  • searchResults sometimes contain the previous results until a new search query is fired. This also means that searchResults.query contains the previous query, as opposed to searchState.query, where the up-to-date query can be found.

We’re also using server-side rendering, click analytics, and conversion analytics. Here is how the configure component looks like:

        <Configure
            optionalFilters={optionalFilters}
            filters={filters}
            queryLanguages={queryLanguages}
            hitsPerPage={hitsPerPage}
            removeWordsIfNoResults="lastWords"
            clickAnalytics
            analytics
        />

The search is performed on a single index, correctly passed to InstantSearch.

[Haroenv]

I simplified the example and found the following things that matter: https://codesandbox.io/s/stoic-hermann-98bx9?file=/pages/index.js

1. stateResults behind hits has the issue, before it doesn’t
2. a hitComponent must be given in default Hits component

For your specific use case, can you try putting StateResults in front of Hits?

[Haroenv]

Found some more things: https://codesandbox.io/s/billowing-browser-gd3kn?file=/src/App.js

• resultsState is required for this to misbehave
• it doesn’t have to be server-side rendered
• only the first StateResults has outdated results
• if key is index (not objectID), the issue doesn’t happen