Conditionally show/hide group of refinements with react-instantsearch

I’m using React InstantSearch.

My goal is to use a MenuSelect dropdown to allow a user to select a product type (foo or bar), and then to show a group of refinements specific to that product type.

I have it working (see code below), but the problem is that it causes 2x HTTP requests to Algolia when the product type is changed. (My theory is it’s because the DOM elements are added/removed from the page and that also causes Algolia to send a 2nd HTTP request.)

Is there a better way to achieve this that does not cause 2x HTTP requests when the product type is changed?


export default class ProductTypeRefinements extends React.Component {
  renderRefinements(productType) {
    switch (productType) {
      case 'foo':
        return <FooRefinements />;
      case 'bar':
        return <BarRefinements />;
      default:
        return <p>Select product type above</p>;
    }
  }

  render() {
    return (
      <div className="product-type-refinements">
        {this.renderRefinements(this.props.productType)}
      </div>
    );
  }
}

I looked at the Panel component, but it doesn’t appear to do what I require.

Thanks