connectStateResults freezes with dynamic hitComponent

Do you want to request a feature or report a bug? Bug

Bug: What is the current behavior? Application freezes; most likely hit component is rendered in a loop

What is the version you are using? Always use the latest one before opening a bug issue. 4.1.3

Here is the example I’m testing on https://codesandbox.io/s/kxlq9608v3 I am using connectStateResults to wrap my Hits to conditionally render them based on search query. I want to pass props to hitComponent, as mentioned here algolia/react-instantsearch#2018 . Following the solution in that issue, I created a dynamic hitComponent, ie instead of

const Content = connectStateResults(
  ({ searchState }) =>
    <Hits hitComponent={HitComponent}/>
);

I tried

const Content = connectStateResults(
  ({ searchState }) =>
    <Hits hitComponent={({hit}) => (<HitComponent hit={hit}/>)}/>
);

This freezes the application. If I remove the connectStateResults wrapper, it works as expected. Also, this seems to be a problem with connectStateResults only; wrapping in connectHits works. Any help is appreciated!

---

<small>originally https://github.com/algolia/instantsearch.js/issues/2586</small>

[wzup]

Same here. connectStateResults is infinite loop. Always returns searching=true case.

const Content = connectStateResults(
  ({ searchState, searching, onSearchStateChange, getSelected }) => {
    if(searching) {
      return <Text>
        SEACHING...
      </Text>
    } else {
      return (
        <InfiniteHits onSearchStateChange={ onSearchStateChange }
                      searchState={ searchState }
                      getSelected={ getSelected }/>
      )
    }
  }
);

              <InstantSearch
                appId="..."
                apiKey="..."
                indexName="..."
                onSearchStateChange={ this.props.onSearchStateChange }
                searchState={ this.props.searchState }
                refresh={ true }
                // resultsState={ { query: '...' } }
              >
                { /*<RefinementList attribute="..." headerText={ '...' } />*/ }
                <TouchableOpacity
                  onPress={ () => {
                    this.props.setModalVisible(false);
                  } }
                >
                  <Text style={ { marginTop: 20, height: 50, alignSelf: 'center', fontSize: 14 } }>
                    Close
                  </Text>
                </TouchableOpacity>
                <SearchBox />
                <Content
                  onSearchStateChange={ this.props.onSearchStateChange }
                  searchState={ this.props.searchState }
                  getSelected={ this.props.getSelected }
                />
              </InstantSearch>

[m-vdb]

Having the same issue with react-instantsearch@v5.0.3.