onChangeComplete doesn't get executed without setting state inside onChange function

[kunokdev]

I am using range option and my component looks like this:

<InputRange
    minValue={0}
    maxValue={this.state.filterOptions_maxPrice}
    value={this.state.filterOptions_priceRangeValue}
    onChange={value => console.log('change regular')}
    onChangeComplete={value => console.log('change event', value)}
/>

in this case onChangeComplete doesn't get executed but if I would change onChange={value => console.log('change regular')} to onChange={value => this.setState({ filterOptions_priceRangeValue: value }} it gets executed. I am trying to avoid this approach because numbers may be large and website starts lagging heavily (even gets blocked for a sec or two).

Any way to avoid setting state inside onChange and only call actions inside onChangeComplete?

[Macxim]

I came across the same issue. I want to avoid this because the public API I'm using has a rate limit. I would prefer somehow storing the value on onChange and execute this.setState() on onChangeComplete.

[chander-prakash]

// Just add the ref for InputRange <InputRange minValue={0} ref="input_range" maxValue={this.state.filterOptions_maxPrice} value={this.state.filterOptions_priceRangeValue} onChange={value => console.log('change regular')} onChangeComplete={value => console.log('change event', value)} />

// and then change the "startValue" in your onChange function, then your onChangeComplete will always call.

[cvsraghava]

// Just add the ref for InputRange <InputRange minValue={0} ref="input_range" maxValue={this.state.filterOptions_maxPrice} value={this.state.filterOptions_priceRangeValue} onChange={value => console.log('change regular')} onChangeComplete={value => console.log('change event', value)} />

// and then change the "startValue" in your onChange function, then your onChangeComplete will always call.

I have tried to add ref but it's not working. Can you please confirm is working for you?