How to prevent my refinementList component from rerendering and losing state?

Question

I am using react instant search library and my issue is that my custom refinement list components loses its selections when I open modal.

I control my modal with useState: const [modalIsOpen, setModalIsOpen] = useState(false);

Everytime I call setModalIsOpen(true); the refinements reset.

My custom refinement list component:

  const RefinementList = ({ items, refine }: RefinementListProvided) => {
    // return the DOM output
    return (
      <div className="">
        {items.map(({ value, label, count, isRefined }: any) => (
          <div key={value}>
            <motion.button
              onClick={() => {
                refine(value);
              }}
              className={``}
            >
              <div className="">
                {label}
              </div>
            </motion.button>
          </div>
        ))}
      </div>
    );
  };

I connect it with connectRefinementList

const CustomRefinementList = connectRefinementList(RefinementList);

This is my main jsx:

      <InstantSearch searchClient={searchClient} indexName="foods">
            <CustomSearchBox />
        <CustomRefinementList
          transformItems={(items) => orderBy(items, "label", "asc")} // this prevents facets jumping
          attribute="tags"
        />
        <InfiniteHits hitComponent={Hit} cache={sessionStorageCache} />
        <ModalForMealPreview
          handleOpen={modalIsOpen}
          handleClose={handleModalClose}
        />
      </InstantSearch>

What can I do to persist state or prevent RefinementList component from rerendering?

Answer 1

Here is a basic Example of React.memo, this will help your code

import React, { useEffect, useState } from "react";

const MemoComp = React.memo(({ ...props }) => <Test {...props} />); // Main Area to watch
function ClassSearch() {
  const [state, setState] = useState(1);
  return (
    <div>
      <button onClick={() => setState(state + 1)}>Increase</button> <br />
      <MemoComp data="memorized" /> <br />
      <Test data="original" /> <br />
    </div>
  );
}

export default ClassSearch;

const Test = ({ data }) => {
  const date = new Date().getTime();
  return (
    <>
      Test {date} {data}
    </>
  );
};