Algolia React Instantsearch Hits component not persisting state

Open Q&A
1

Hi, I have the following components:

/* eslint-disable */
import { useState, useRef, useEffect } from "react";
import algoliasearch from "algoliasearch/lite";
import {
  CurrentRefinements,
  InstantSearch,
  RefinementList,
  Hits,
  Highlight,
  SearchBox,
  useInstantSearch,
  useRefinementList,
} from "react-instantsearch";
import "instantsearch.css/themes/satellite.css";
import Offcanvas from "react-bootstrap/Offcanvas";
import "bootstrap/dist/css/bootstrap.min.css";
import Button from "react-bootstrap/Button";

const searchClient = algoliasearch(
  "REDACTED",
  "REDACTED"
);

export default function App() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <Button variant="primary" onClick>
        Open
      </Button>

      <InstantSearch searchClient={searchClient} indexName="react_demo_01">
        <CurrentRefinements />
        <VirtualFilters />
        <SearchBox />
        <Hits hitComponent={Hit} />
        <Offcanvas show={isOpen} onHide={() => setIsOpen(false)}>
          <Offcanvas.Header closeButton>
            <Offcanvas.Title>Offcanvas</Offcanvas.Title>
          </Offcanvas.Header>
          <Offcanvas.Body>
            <Filters />
          </Offcanvas.Body>
        </Offcanvas>
      </InstantSearch>
    </>
  );
}

function Filters() {
  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 (
    <div>
      <h2>Brands</h2>
      <RefinementList attribute="brand" />
    </div>
  );
}

function VirtualFilters() {
  useRefinementList({ attribute: "brand" });

  return null;
}

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>
  );
}

I’m using the following package versions:

"dependencies": {
    "@headlessui/react": "^1.7.17",
    "algoliasearch": "^4.20.0",
    "bootstrap": "^5.3.2",
    "instantsearch.css": "^8.1.0",
    "react": "^18.2.0",
    "react-bootstrap": "^2.8.0",
    "react-dom": "^18.2.0",
    "react-instantsearch": "^7.1.0"
  },

I followed the docs here:

But now when I click the button and open the Offcanvas component, select a brand, close the Offcanvas component the UI state is not persisted. Any ideas why and how to fix?

Edit: The button onClick handler is empty because it was giving me a 403 whenever I tried to save my post for some reason. The onClick handler just sets isOpen to true.