Improve load-time performance of widgets

[Haroenv]

When mounting a lot of widgets, the time to mount can add up quite a bit. This issue highlights a couple ways to deal with it. These PRs are ordered in the ordering they should end up in master.

Times are for an extreme app which mounts hundreds of widgets using DynamicWidgets.

The applied changed in 🟢 are available in InstantSearch.js 4.64.1, React InstantSearch 7.5.3, Vue InstantSearch 4.13.5

swap clearRefinements for individual refinement clearing methods which are more efficient 🟢

• PR: fix(perf): remove usage of SearchParameters.clearRefinements #6004
• impact: 650ms -> 350ms

Fix sort of facet values in requestBuilder 🟢

• PR: fix(requestBuilder): sort facet refinements in a non-mutating manner #6007
• sort the facet values in a non-mutating manner for cache hit rate
• issue is shown in failing test in fix(perf): improve speed of setQueryParameters #6006

avoid a copy of parameters to set in setQueryParameters and new SearchParameters 🟢

• PR: fix(perf): improve speed of setQueryParameters #6006
• impact: 350ms -> 120ms

Don't recompute search parameters for every widget 🔴

• privateHelperSetState function needs to loop through every already added widget, and this is called once per addWidgets. In react there's one addWidgets for every widget, instead of being able to call addWidgets once for all widgets at once
• impact: 120ms -> ~70ms(?) (only an estimate, this was completely removing the code completely)
• relevant code:
  

  instantsearch/packages/instantsearch.js/src/widgets/index/index.ts

  Lines 326 to 333 in 2258d89

  	privateHelperSetState(helper!, {
  	state: getLocalWidgetsSearchParameters(localWidgets, {
  	uiState: localUiState,
  	initialSearchParameters: helper!.state,
  	}),
  	_uiState: localUiState,
  	});

Don't clean up "unused" UiState and parameters 🔴

• For the moment this is too much code to change to be able to measure, but we have a decent amount of impact cleaning up the impact of a widget no longer being mounted in getWidgetSearchParameters and getWidgetUiState. This would be more efficient if we left the empty values in place instead of looping and checking if every value is empty.
• This isn't straightforward to change, as UiState is passed to routing for example where we need to be sure empty values are removed (they aren't today), as well as for inheriting parameters with multi-index, where an empty values implies a child index takes preference over a parent index, even if it has no refinements.

[redox]

Exciting @Haroenv - I think https://sorare.com/football/market/new-signings could be a great production use-case to confirm those numbers ; I can give this a try next week

[redox]

@Haroenv I'm a bit confused, is instantsearch.js 4.64.1 including those?

[dhayab]

Hi @redox, Haroen is off so I'll answer in his place. Today's release of instantsearch.js@4.64.1, react-instantsearch@7.5.3 and vue-instantsearch@4.13.5 include the PRs mentioned in this issue.