How to identify which component mounted / unmounted?

[callmekatootie]

I am using react instantsearch v7.

I get this message when I perform an action on my UI:

Starting from the next major version, InstantSearch will change how widgets state is preserved
when they are removed. InstantSearch will keep the state of unmounted widgets to be usable by
other widgets with the same attribute.

We recommend setting `future.preserveSharedStateOnUnmount` to true to adopt this change today.
To stay with the current behaviour and remove this warning, set the option to false.

I have preserveSharedStateOnUnmount set to true - but that is not my question. I am performing an action on the UI that does not affect the algolia filters in any way... As in, I don't expect any filter to mount or unmount. Clearly I did something wrong.

Q1 - How do I know widget was removed that resulted in the above message getting displayed?

Somewhat related - I am using useHits() hook to render my results. This UI action that I speak of earlier updates the results, but in our db (and eventually in Algolia - but not through UI instead through a separate backend process). But for some reason, useHits() hook get triggered which sends across updated items... And I don't want this to happen... I suspect it may have something to do with the above warning... Basically, I didn't update any filter and yet I am getting latest items...

Q2 - Could the above warning about mounting / unmounting of widget trigger the useHits() component? I am guessing it has to but just want to be sure of my debugging skills / direction I am taking to find the bug.

[Haroenv]

This warning gets given on launch of InstantSearch, not on the first time a widget unmounts (which probably would be correct).

What do you mean with the useHits gets updated? do you mean you did a rerender of the component that caused useHits to be evaluated again? If you don't see a network request happening, it makes sense and it's still going to display the same hits unless you changed the filter or the query.

If you have an example that shows the issue, we can look at what's going on in detail

[callmekatootie]

Thanks for the prompt reply.

It's definitely not a bug with Algolia - but a bug with my code. Trying to figure out where I went wrong since I have too many filters to narrow it down.

Good to know that the warning is given on launch. So I have a direction I can debug in.

Re: useHits() - yes, the component calling it seems to re-render. No network request though...

[callmekatootie]

So it seems like

• the component calling useHits() get re-rendered, which calls useHits() again
• and although it's the same items (content wise), it could be a different reference (since my useEffect with items as dependency gets triggered again).
• and this messes up my app's internal state tracker

I was able to narrow down this issue to when I have nested components. User does an action on the UI which mounts the nested component - and then when this nested component unmounts, the component with useHits() re-renders. This component is a direct child of the parent component.

Do you see any reason why the nested InstantSearch components could be causing this? Any hints?

[Haroenv]

Yes, when a widget gets added or removed, all InstantSearch widgets will render again, as that could cause a change to the search results (even if they actually end up being cached and no change was done). Your internal state can likely be hoisted above InstantSearch and won't reset if that widget renders again