Component Render atleast 5 times before final results about react-algoliasearch-helper

[alexkirsz]

Calling any mutator method on the helper will produce a "change" event and the state of the store will change with a new searchParameters.

Calling .search() will also update state.searching from false to true, then update the state again once results have been retrieved.

Every state change will result in the mapStateToProps function of all connected components to be called. Simply calling search on componentDidMount will thus result in three calls: one on init, one once .search() has been called, and one once results have been retrieved.

Thankfully, we implement a shouldComponentUpdate hook on connected component that ensures that they will only re-render the underlying component when they receive new props or when the result of mapStateToProps has shallowly changed.

If you want to decrease the number of calls to mapStateToProps, try to decrease your state mutations. For instance, by using .getState()/.setState(newState) and manipulating the SearchParameters directly.

[vvo]

Hey @harshmaur, we have an alpha release of react-instantsearch, if you want to be part of it, send me an email to [email protected] I will follow up

[harshmaur]

@alexandremeunier I see. You are right.

In my componentDidMount I have been doing this.

helper.addFacetRefinement a few times which caused more rerenders.

So now instead of doing that I am directly modifying the searchParameters object and using .setState like this.

    const {helper} = this.props;
    const {category_slug = "", brand_slug = ""} = this.props.params;
    const partialState = url.getStateFromQueryString(document.location.search.slice(1));
    const state = helper.getState();

    if (_.isEmpty(partialState)){
      // happens on pages like http://localhost:3000/f/winter-wear/kanvin
      // where we dont have params like ?q=&dFR[store_name][0]=SNAPDEAL&fR[brand_slug][0]=kanvin&fR[category_slug][0]=winter-wear&fR[instock][0]=1

      _.assign(partialState, {facetsRefinements: {brand_slug: [brand_slug], category_slug: [category_slug], instock:[1] }});

      // handling issues where slugs are not present, example on search page


    }

    const updatedState = state.setQueryParameters(partialState);
    helper.setState(updatedState);


    helper.search();

I am still not sure if I did it properly, it seems to work though. Please advise.