CODEWITHSUNDEEP
react-nativealgoliainstantsearch.js
rosnk
rosnk

Reputation: 1098

result list with hits get reset when component with “useSortBy” hooks is closed

I am using "import { useSortBy } from "react-instantsearch-hooks", to create a sortby dropdown in expo project(react native). This sort by component is inside parent component, which opens like model.

Problem: sorting works fine while i open the filter component and choose different filter(ex by price desc, price asc), but as soon as i close the model, whole shorted list result is reset... basically result does not stick to the my choosen sorted result.

video: https://youtu.be/J5uZF01lVtU

pic1: before any sorting, results are as in pic:

pic2: i click the filter, which shows component similar to model, where i can choose dropdown filter, results after i click desc(which is working fine while, filter screen is still showing):

pic3: once i click the filter icon to remove the filter screen, result does not stick to price by desc, it resets to original result:

here is the source code in snack: https://snack.expo.dev/@rosnk/algoli_sortby_example_buggy

note: ( snack code is perfectly fine.... snack is showing error on import line of algolia... that is on this line: import { InstantSearch } from "react-instantsearch-hooks";

Upvotes: 0

Views: 459

Answers (1)

marty
marty

Reputation: 106

When you update the state by setFilterVisible function, SearchPage component and its child components re-render. To avoid unnecessary re-renders you can wrap with memo the component which shows the results.

Upvotes: 0

Related Questions