Dynamic widgets and better event hook ups

[dianos]

Hi I'm currently adding dynamic refinenmentlists based on search results.
I'm hooked up to the 'render' event:
search.on('render', (renderOptions) => {

My problem is that adding the new widgets also triggers render events. And that my on 'render; code is called after the initial results are already displayed. Is there any way to optimize this so that:

1. I could hook up to an event prior to render being complete but search results data has already came back?
2. not trigger additional renders when adding the new widgets?

[dianos]

When calling:
search.addWidgets(toAdd)
Another request is made to the server to get data for the new widgets?

 searchFunction: function(helper) {
    if  (prevSearch==helper.state.query) {
    console.log("Same search repeted:",helper.state.query);
//     return; // no search
    }

I'm trying to prevent the resulting flickery UI, where hits are rendered multiple times.

[Haroenv]

We haven't yet solved this completely, but there's a draft pull request here: #4997 (to avoid flicker in dynamic widgets, when there's a refinement).

Have you checked out the dynamicWidgets widget in general for making what you are trying to repeat? It avoids a second search request in most cases (except if there is a refinement enabled on the new widgets) by requesting facets: * and maxValuesPerFacet: 20, so the request before the refinements are added, and after they're added are equal.

[zergormagn]

Is there any examples or demos for the dynamicWidgets ? There has been many attempts at trying to implement this type of functionality in instantsearch over the years that it's very difficult to make any heads and tails out of the whole mess. A couple simple working demos would go a long way to get people on the currently supported path.

[francoischalifour]

We introduced the dynamicWidgets widget in InstantSearch.js v4.30.0. We explain how to use it in "Facet Display in InstantSearch.js".

[zergormagn]

Thanks, I was more looking for something like this that clearly illustrates the power of DynamicWidgets:
https://codesandbox.io/s/github/algolia/react-instantsearch/tree/v6.29.0/examples/hooks?file=/hooks-next/pages/index.tsx

This example is already outdated, as react has changed. So highlight wouldn't work anymore.

I just find it difficult to find current instantsearch examples as there is so many different ways how things have been done in the past. Many moving parts, especially with the new hooks library.