React Debounce Demo

A demo of React.js input debouncing using ES6

by Muthuraman B

HTML

<div id="container">
    <!-- This will be replaced with the component -->
</div>

React

class Table extends React.Component {
    constructor (props) {
        super(props)
        this.state = { searchTerm: props.searchTerm }
    }

    setSearchTerm = debounce(searchTerm => {
        this.setState({ searchTerm })
    }, 1500);

    render() {
        return (
            <div className="widget">
                <p>{this.state.searchTerm}</p>
                <input onChange={() = e => this.setSearchTerm(e.target.value)} />
            </div>
        )
    }
}

ReactDOM.render(<Table searchTerm="" />, document.getElementById('container'));

function debounce(a,b,c){var d,e;return function(){function h(){d=null,c||(e=a.apply(f,g))}var f=this,g=arguments;return clearTimeout(d),d=setTimeout(h,b),c&&!d&&(e=a.apply(f,g)),e}}