debounce.jsx

import React from 'react'

class Debounce extends React.Component {
  constructor(props) {
    super(props)
    
    this.state = {
      value: ''
    }
    
    this.timeout = null
    
    this.onChange = this.onChange.bind(this)
    this.onDebounce = this.onDebounce.bind(this)
  }
  
  onChange(event) {
    const { target: { value } } = event
    
    clearTimeout(this.timeout)
    
    this.setState(
      { value },
      () => (
        this.timeout = (
          setTimeout(this.debounce, 500)
        )
      )
    )
  }
  
  onDebounce() {
    const { value } = this.state
    const { onDebounce } = this.props
    
    onDebounce(value)
  }
  
  render() {
    const { value } = this.state
  
    return (
      <input 
        value={value}
        onChange={this.onChange}
      />
    )
  }
}

export default Debounce