algolia / algolia/instantsearch

Duplicate requests with instantsearch and useRefinementList hook

Open
#5,953 1 comment 0 reactions 0 assignees View on GitHub
Library: React InstantSearch ≥ 7
Dominant language
TypeScript
Stars
4.1k
Forks
554
Avg merge
1d 11h
Merged PRs (30d)
51

Description

### 🐛 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 (


{items.map((item) => (

{
refine(item.value);
}}
disabled={item.count === 0}
>
{item.label}


))}

);
}

```

### 🔍 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

- [X] I agree to follow this project's Code of Conduct

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the initial load with the supplied useRefinementList component and multiple components inside the InstantSearch context. Trace the React InstantSearch request lifecycle to identify why identical requests are sent during initialization. Done means the page-load scenario makes one request instead of one per component, while later requests remain singular.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, search
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.