Duplicate requests with instantsearch and useRefinementList hook

[chrissshh]

🐛 Current behavior

Instantsearch sends multiple duplicate requests to fetch results and it seems to happen with this component mostly in instantsearch using the useRefinementList() hook. Does anyone know how to fix this because I've tried just about everything. Thanks!!

function XRefinementList({
  attribute,
}: {
  attribute: string;
}) {
  const { items, refine } = useRefinementList({
    attribute: attribute,
    sortBy: ["count:desc", "name:asc"],
  });

  return (
    <div>
      {items.map((item) => (
        <div key={item.label}>
          <button
            type="button"
            onClick={() => {
              refine(item.value);
            }}
            disabled={item.count === 0}
          >
            {item.label}
          </button>
        </div>
      ))}
    </div>
  );
}

🔍 Steps to reproduce

Add useRefinementList into a component and have multiple components with the instantsearch context. It will perform a fetch for each component with an identical request. After page is loaded, all requests are normal and singular.

Live reproduction

codesandbox.io

💭 Expected behavior

No duplicate requests when loading the page.

Package version

react-instantsearch 7.4

Operating system

No response

Browser

No response

Code of Conduct

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

[Haroen Viaene]

I can think of the props passed to useRefinementList not being stable possibly (although normally we have code to prevent loops), or the component itself not rendering consistently. Do you have a reproducible example on eg. code sandbox?