debounce-react

debounce function and hook for the same

Install

npm install --save debounce-react

Usage

import { debounce, useDebounce } from 'debounce-react'


const ExampleComponent = () => {

  const [value, setValue] = useState('');

  const callback = () => {
    console.log('consoled')
  }

  //debounce hook
  //arguments
  // 1.the state for which the debounce is needed
  // 2. Callback
  // 3. debounce time in second
  useDebounce(value, callback, 400)

  const handleInputChange = (e) => {
    setValue(e.target.value)
  }

  return <div>
    <input value={value} onChange={handleInputChange} />
  </div>
}

export default class App extends Component {

  state = {
    value: '',
    valid: false
  }

  handleInput = (e) => {

    this.setState({
      value: e.target.value
    })

    const callback = async () => {
      const res = await fetch('https://5f270a610824d8001655ee91.mockapi.io/api/v1/test')
      console.log(res, 'res')
      if (res.status === 200) {
        this.setState({
          ...this.state,
          valid: true
        })
      }
    }

    //debounce function 
    //Arguments -
    // 1. Callback
    // 2. debounce time in second
    debounce(callback, 500)
  }

  render() {
    return (
      <div>
        <ExampleComponent />
        <input value={this.state.value} onChange={(e) => this.handleInput(e)} />
        {
          this.state.valid && <p>Valid value</p>
        }
      </div>
    )
  }
}

License

MIT © abidhkm