React Debounce Demo

A demo of React.js input debouncing using ES6

by Pete Watson-Wailes

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This will be replaced with the component -->
</div>

Babel + JSX

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

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

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

ReactDOM.render(<Table searchTerm="Initial search term" />, 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}}