[react-instantsearch-hooks] Virtual widget state getting cleared on unmounting of Original Refinement List

[arindam1997007]

🐛 Current behavior

I have created a VirtualFilters to use useRefinementList, to store the state of the applied filters.
The filters are displayed inside a modal. When the modal closes, the CurrentRefinements resets its value to default.

I have followed the exact code as given in the official docs - Persist State on Unmount

I have checked the other issue related to this ISSUE : 5240, but I want this to work with the virtual widgets if possible.

Can you please tell me, if I am making a mistake somewhere?

🔍 Steps to reproduce

CodeSandbox

• Click on the "Filters" button to open the modal
• The refinements will be listed.
• Click again on "Filters" to hide it.
• The refinement has reset and no filters are being displayed.

Live reproduction

https://mvkzz9.csb.app/

💭 Expected behavior

When I close the Filters modal, the CurrentRefinements should not reset, but persist the state of the updated filters.
This should happen, since I have created a VirtualFilters component to store the state as well, which doesn't get unmounted.

Package version

algoliasearch: 5.11.0, react-instantsearch": 7.13.6

Operating system

MacOS 15.3.1

Browser

Edge 132.0.2957.140

Code of Conduct

• I agree to follow this project's Code of Conduct

[Haroenv]

Your sandbox is private so I can't see everything, but I think what's missing in that documentation is the future={{ preserveSharedStateOnUnmount: true }} isn't set in that exact code snippet. Do you have that enabled?

[arindam1997007]

Your sandbox is private so I can't see everything, but I think what's missing in that documentation is the future={{ preserveSharedStateOnUnmount: true }} isn't set in that exact code snippet. Do you have that enabled?

Yeah sorry, I have made it public now https://codesandbox.io/p/sandbox/mvkzz9. Can you see if you can access it now?

I didn't set future={{ preserveSharedStateOnUnmount: true }}.
Is this required even if I am maintaining the state in another component (which won't get unmounted)?

I can see this was the first solution mentioned in the doc
So, how come Sol#1 and Sol#3 differ?

[Haroenv]

Solution 3 is the one that was written before preserveSharedStateOnUnmount existed, it should work as well, but will work better in conjunction with solution one (and you won't technically need to store the ui state anymore).

I'm not fully sure yet why your sandbox doesn't work, the save in the ui state should work alone, except if possibly the cleanup of the widgets somehow gets done later than the "reset on unmount" you have implemented with ui state

[arindam1997007]

@Haroenv
Yeah, on applying preserveSharedStateOnUnmount, the filter states are working properly.

For my solution, I actually directly copied the code available in the docs, don't know what's the issue.

Should I keep this issue open as to figure out why Sol#3 is not working on its own?

[Haroenv]

Yes, let's keep this issue open and I'll see if the solution in the docs need to be removed or can be fixed