Jhey Tompkins
1 min readJan 16, 2018

--

Awesome 👍

Is it working as you would expect now? There are different syntax styles that can be used. The public class fields syntax is great for avoiding having to write things like this.function = this.function.bind(this).

You could also write the debounce like this

class CloneInput extends React.Component {
handleInput = debounce(() => {
// handle input code, bound to component instance
}, this.props.delay)
render() {
return (
<input type="text" onChange={this.handleInput}/>
)
}
}

It likely looks a little cleaner and this way the debounce call is with the handleInput method. The only thing with this is if your component renders multiple input that all use the same handleInput method but it’s not necessary to debounce all of their onChange events. That comes down to design though 😃

Hope that helps!

--

--

Jhey Tompkins
Jhey Tompkins

Written by Jhey Tompkins

I make awesome things for awesome people!

No responses yet