Inferno: Need help debouncing input

[dessalines]

There seem to be some react libraries for debouncing input, but can't get any of them to work with inferno. I tried several ES6 debounces, but none seemed to work either.

I basically need onInput={linkEvent(this, debounce(this.handleChange))}

Has anyone gotten input debounce working?

[Havunen]

@dessalines usually debounce implementations work so that they return new function which is the debounced one. Maybe the issue you are having is related to that you need to store the debounced function somewhere and then pass that to linkEvent rather than creating new one in each render.

Something like this:

// Now that we are storing the reference anyway we can just bind "this"
this.handleChange = debounce(this.handleChange.bind(this));

...

onInput={this.handleChange}

[dessalines]

I'll try this out and get back, thanks.

[dessalines]

Thanks, that seems to work, but also this:

handleChange = debounce((i: form, event: any) => {...

Another issue I'm running into when using debounce, is that if the input has an initial value that's not null or undefined, it won't allow the value to be changed. Only <input defaultValue={this.state... works, but not <input value={this.state....

[Havunen]

@dessalines when input has value defined then that input becomes so called controlled input and the value in JS side is the source of truth.

So when using value on input then you need to read the value in onInput event and set it into state. Then put that value ( or modified one ) from state to inputs value property. This is how you stay in control what the real value shown to user is.

Now about debouncing, If you are trying to build searchbox or something like that and you want to throttle network traffic or some other I/O then you need to throttle not the input event but the callback / logic method otherwise typing into input becomes throttled too, which is probably not expected

[dessalines]

Basically I have a searchbox, that on a page reload (when you've already done a query, and it puts that query in the url params), it fills that box. So I need debouncing both when the input is initally empty, and when it has an initial value. But when its filled, the input now doesn't fill anything.

Now about debouncing, If you are trying to build searchbox or something like that and you want to throttle network traffic or some other I/O then you need to throttle not the input event but the callback / logic method otherwise typing into input becomes throttled too, which is probably not expected

I'll try to implement this / find a way around it.

[dessalines]

Okay I finally figured this one out!

So it turns out you never really want to debounce the input directly, it will cause lots of weird timing issues.

What you do, is break out your fetching / API call into a separate method, call it from your handleChange, and then in the constructor, do this.fetch = debounce(this.fetch).bind(this);

Thanks for the assistance @Havunen !