fix(perf): remove usage of SearchParameters.clearRefinements (#6004)

This functions is much slower than individually clearing the specified refinements. In a test with DynamicWidgets + 118 RefinementLists the initial mount goes from 600ms to 350ms in my tests.

I've looked around to see if there's good tools for these improvements, to ensure we don't regress, but i couldn't find much (perf is mainly focused on apps).

Unfortunately I can't really deprecate the method as we still use it in a non-hot path inside the helper itself to create the right queries in queryBuilder. We'll just have to rely on "seeing other examples" to avoid using parameters.clearRefinements.

As widgets can't be mixed across the same attribute, there's no actual risk in this change AFAICT.

Author: Haroenv

packages/instantsearch.js/src/connectors/numeric-menu/connectNumericMenu.ts

@@ -214,7 +214,7 @@ const connectNumericMenu: NumericMenuConnector = function connectNumericMenu(
 
       dispose({ state }) {
         unmountFn();
-        return state.clearRefinements(attribute);
+        return state.removeNumericRefinement(attribute);
       },
 
       getWidgetUiState(uiState, { searchParameters }) {
@@ -250,15 +250,15 @@ const connectNumericMenu: NumericMenuConnector = function connectNumericMenu(
       getWidgetSearchParameters(searchParameters, { uiState }) {
         const value = uiState.numericMenu && uiState.numericMenu[attribute];
 
-        const withoutRefinements = searchParameters.clearRefinements(attribute);
+        const withoutRefinements = searchParameters.setQueryParameters({
+          numericRefinements: {
+            ...searchParameters.numericRefinements,
+            [attribute]: {},
+          },
+        });
 
         if (!value) {
-          return withoutRefinements.setQueryParameters({
-            numericRefinements: {
-              ...withoutRefinements.numericRefinements,
-              [attribute]: {},
-            },
-          });
+          return withoutRefinements;
         }
 
         const isExact = value.indexOf(':') === -1;

packages/instantsearch.js/src/connectors/rating-menu/connectRatingMenu.ts

@@ -454,9 +454,10 @@ const connectRatingMenu: RatingMenuConnector = function connectRatingMenu(
       getWidgetSearchParameters(searchParameters, { uiState }) {
         const value = uiState.ratingMenu && uiState.ratingMenu[attribute];
 
-        const withoutRefinements = searchParameters.clearRefinements(attribute);
-        const withDisjunctiveFacet =
-          withoutRefinements.addDisjunctiveFacet(attribute);
+        const withDisjunctiveFacet = searchParameters
+          .addDisjunctiveFacet(attribute)
+          .removeNumericRefinement(attribute)
+          .removeDisjunctiveFacetRefinement(attribute);
 
         if (!value) {
           return withDisjunctiveFacet.setQueryParameters({

packages/instantsearch.js/src/connectors/refinement-list/connectRefinementList.ts

@@ -517,11 +517,13 @@ As this is not supported, please make sure to only use this attribute with one o
           const values =
             uiState.refinementList && uiState.refinementList[attribute];
 
-          const withoutRefinements =
-            searchParameters.clearRefinements(attribute);
           const withFacetConfiguration = isDisjunctive
-            ? withoutRefinements.addDisjunctiveFacet(attribute)
-            : withoutRefinements.addFacet(attribute);
+            ? searchParameters
+                .addDisjunctiveFacet(attribute)
+                .removeDisjunctiveFacetRefinement(attribute)
+            : searchParameters
+                .addFacet(attribute)
+                .removeFacetRefinement(attribute);
 
           const currentMaxValuesPerFacet =
             withFacetConfiguration.maxValuesPerFacet || 0;

packages/instantsearch.js/src/connectors/toggle-refinement/connectToggleRefinement.ts

@@ -455,8 +455,8 @@ As this is not supported, please make sure to remove this other widget or this T
           }
 
           let withFacetConfiguration = searchParameters
-            .clearRefinements(attribute)
-            .addDisjunctiveFacet(attribute);
+            .addDisjunctiveFacet(attribute)
+            .removeDisjunctiveFacetRefinement(attribute);
 
           const isRefined = Boolean(
             uiState.toggle && uiState.toggle[attribute]