react-debounce-component

> Debounce any component with React or React Native

``js




`

Tiny: react-debounce-component is very tiny, fast and does not require any other package. Overall it has under 70 lines of code.

Generic: You can debounce almost anything you want: input, search, render, functional components, fetch, api calls, ... It works with react and react-native.

Easy: Think In React not JS. Most other solution work with functions, but this is a <Component>. It makes the code easier to understand and less error-prone. Just put what you want to debounce inside <Debounce>here</Debounce> of your render function and you're good.

Install


`sh
npm install react-debounce-component --save
`
or use yarn.

Examples

$3

This is the most simple example. It just debounces the output of <input> for one second.


`js
import React from 'react';
import Debounce from 'react-debounce-component';

class App extends React.Component {
constructor (props) {
super(props);
this.state = {value: 'Hello'}
}
render () {
return (


);
}
}

export default App;
`

$3

This is a more common scenario, where a list gets fetched from the web.

Expand

`js
import React from 'react';
import Debounce from 'react-debounce-component';

class App extends React.Component {
constructor (props) {
super(props);
this.state = {value: ''}
}
render () {
return (



this.setState({value: event.target.value})}/>





);
}
}

class List extends React.Component {
constructor (props) {
super(props);
this.state = {items: []};
}
componentDidUpdate (prevProps) {
if (prevProps !== this.props) { // Prevent rendering after setState()
fetch('https://api.publicapis.org/entries?title=' + this.props.search)
.then(res => res.json())
.then(result => this.setState({items: result.entries || []}));
}
}
render () {
return (

{this.state.items.map(item => (

• 
  {item.API} {item.Link}
  

))}

);
}
}

export default App;
``

Props

$3

Time to wait (delay) in milliseconds until the component inside <Debounce> gets rendered.

| | |
| -------- | ------ |
| required | no |
| default | 250 |
| type | number |

$3

What to display on first render (mount). Default is to render the children immediately (e.g. fetch immediately)

Tip: put in null to prevent rendering the children on mount

| | |
| -------- | --------- |
| required | no |
| default | children |
| type | component |

---

Supports React version 16.0.0 and higher. Should even work with 0.13.0 and higher.

---

$3

react-debounce-component is MIT licensed.