React Instantsearch - unable to persist the RefinementList state on unmount

[cmgchess]

I have a Modal/Dialog which has a RefinementList. When I close it after selecting refinements the hits get reset
So I have been trying to persist the state of RefinementList following the docs here using a Virtual RefinementList but I couldn't get it to work. I have attached the demo as well

import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Offcanvas } from "react-bootstrap";
import { useState, useEffect, useRef } from "react";
import algoliasearch from "algoliasearch/lite";
import {
  InstantSearch,
  Hits,
  Highlight,
  RefinementList,
  useRefinementList,
  useInstantSearch
} from "react-instantsearch";
// import { Dialog } from "./dialog";
// import { Dialog } from "@headlessui/react";

//https://www.algolia.com/doc/guides/building-search-ui/widgets/show-and-hide-widgets/react/#persist-the-state-on-unmount

const searchClient = algoliasearch(
  "latency",
  "6be0576ff61c053d5f9a3225e2a90f76"
);
const indexName = "instant_search";

function VirtualRefinementList(props) {
  useRefinementList(props);
  return null;
}

function ActualRefinementList(props) {
  const { uiState, setUiState } = useInstantSearch();
  const uiStateRef = useRef(uiState);

  // Keep up to date uiState in a reference
  useEffect(() => {
    uiStateRef.current = uiState;
  }, [uiState]);

  // Apply latest uiState to InstantSearch as the component is unmounted
  useEffect(() => {
    return () => {
      setTimeout(() => setUiState(uiStateRef.current));
    };
  }, [setUiState]);

  return <RefinementList attribute={props.attribute} />;
}

export function App() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <InstantSearch searchClient={searchClient} indexName={indexName}>
        <VirtualRefinementList attribute="brand" />
        <Button variant="primary" onClick={handleShow} className="me-2">
          Open
        </Button>

        <Offcanvas show={show} onHide={handleClose}>
          <Offcanvas.Header closeButton>
            <Offcanvas.Title>Offcanvas</Offcanvas.Title>
          </Offcanvas.Header>
          <Offcanvas.Body>
            <ActualRefinementList attribute="brand" />
          </Offcanvas.Body>
        </Offcanvas>
        <Hits hitComponent={Hit} />
      </InstantSearch>
    </>
  );
}

function Hit({ hit }) {
  return (
    <article>
      <img src={hit.image} alt={hit.name} />
      <p>{hit.categories[0]}</p>
      <h1>
        <Highlight attribute="name" hit={hit} />
      </h1>
      <p>${hit.price}</p>
    </article>
  );
}

help is much appreciated!

[Haroenv]

This will be fixed with #5123, you can already try out the build in that PR with the option

[Haroenv]

@cmgchess, no that workaround isn't needed anymore with the new option (the guide will be updated when released)

[cmgchess]

i believe this is release now?

[dhayab]

Hi, this is now available, you can update to react-instantsearch@7.2.0 to use it in your app.

[bar-lavie]

I've been looking for this solution! 😺 working great with the future prop!
I'm with react-instantsearch@7.5.0, will this be available as a core feature in the future?

[Haroenv]

@bar-lavie, we will flip the default next major, but you're able to safely use the future prop already :)

[lpkobamn]

Is there anyone to whom preserveSharedStateOnUnmount: true didn't help?

[Haroenv]

are you still rendering another widget with the same parameters?

[lpkobamn]

are you still rendering another widget with the same parameters?

Thanks for the answer, as it turned out I misunderstood, I did not render another widget with the same parameters. The problem is solved