algolia / algolia/instantsearch
Duplicate requests with instantsearch and useRefinementList hook
- 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
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