cleanUp on connectors with React Native and screens

How do you deal with the cleanUp that happens in connectors when using react-navigation and screens?

For example, if you try to put a refinementList in a modal, the connector’s cleanUp will be called when the modal closes since it’s unmounted. Obviously this is desirable behavior since it helps with performance, but it seems like Instantsearch was designed with the intention of keeping everything mounted all the time.

What I’ve been doing so far is copying the connectors and just removing the cleanUp from their description, but would love any other suggestions.

Removing the cleanUp function will indeed perform as expected in your particular use case, where you want to make it seem as if the widgets always stay mounted; until the main screen unmounts.

However, another way to do this is with portals. This will allow you to keep the widgets in the tree; while they are visible, or not visible, in other parts of the apps.

see also this: https://www.algolia.com/doc/guides/building-search-ui/going-further/native/react/

Hi @guido,

Rather than removing the cleanUp function I would recommend to use the controlled mode of React InstantSearch. The link provided by @haroen gives you a great example of this usage. The relevant part is under the section “Create a modal”.

1 Like

This actually doesn’t help. I tried using a controlled InstantSearch component, but that doesn’t stop connectSearchBox from removing the query refinement when it’s unmounted via it’s cleanUp.