Empty/No Result Boundary - InstantSearch Hooks - Warning "Can't perform a React state update on an unmounted component."

[ventureweb-ojw]

🐛 Bug description

When following the code examples for implementing an Empty Results Boundary (https://www.algolia.com/doc/guides/building-search-ui/going-further/conditional-display/react-hooks/#handling-empty-queries), an error is thrown when a term is searched for, and then deleted from the search box (to replicate - type term and delete).

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

The same is replicable when following the code examples for a No Results Boundary (documentation at same link as above).

This is found in a statically rendered search page in a next application implementing InstantSearch Hooks.

🔍 Bug reproduction

Steps to reproduce the behavior:

1. Spin up a sandbox next site
2. Create a search page and implement the following code for the page component:

   
   function App(props) {
   return (
   <InstantSearch {...props}>
     <SearchBox />
     <EmptyQueryBoundary fallback={null}>
       <Hits />
     </EmptyQueryBoundary>
   </InstantSearch>
   );
   }

function EmptyQueryBoundary({ children, fallback }) { const { indexUiState } = useInstantSearch();

if (!indexUiState.query) { return fallback; }

return children; }

3. Start typing your search term
4. Delete the search term from the search box 
5. Inspect console to see warning error.

## 💭 Expected behaviour

Wouldn't expect to see the error

## 🖥 Screenshots

<img width="734" alt="Screen Shot 2022-11-02 at 1 13 26 PM" src="https://user-images.githubusercontent.com/3850379/199594850-c566c4d8-3883-418c-8291-4db200dd828f.png">

## Environment

- "react-instantsearch-hooks-web": "^6.34.0",
- React version: 17.0.2
- Browser: Version 107.0.5304.62 (Official Build) (arm64)
- OS: macOS Monterey

[Haroenv]

I've reproduced the code in a sandbox, but I don't get this warning, so maybe there's something else still going on? I have an idea what could be the source of the issue (state synchronisation inside useConnector), but as I can't reproduce with the default implementation, the issue may actually be something else.

Here's my sandbox: https://codesandbox.io/s/determined-bardeen-0pi6ut?file=/src/App.tsx if you can reproduce with making any changes or from scratch, I'd love to see that!

Note: this is a warning, not an error :)

[ayuhito]

I actually have encountered this too for my Remix website, however, it doesn't seem to happen in production builds but in dev mode. Perhaps related to HMR implementations that Next or Remix uses?

[ventureweb-ojw]

@Haroenv - thanks for the sandbox. I will try and get an example of the code running in the Next framework to see if I can replicate and share the issue. @ayuhito - yes interesting. I have this issue in production with the Next application, when instantsearch is added to a statically rendered page.

[FabienMotte]

We're doing a round of cleanup before migrating this repository to the new InstantSearch monorepo. This issue seems not to have generated much activity lately, so we're going to close it. Feel free to reopen it with a reproduction link if you still encounter the warning.