react-debounce-component
Debounce any component with React or React Native
<input><Debounce ms=500> <List/></Debounce>
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
npm install react-debounce-component --save
or use yarn.
Examples
Example 1
This is the most simple example. It just debounces the output of <input> for one second.
;; Component { superprops; thisstate = value: 'Hello' } { return <div> <input value=thisstatevalue onChange= {this}/> <Debounce ms=1000> <div>thisstatevalue</div> </Debounce> </div> ; } ;
Example 2
This is a more common scenario, where a list gets fetched from the web.
Expand
;; Component { superprops; thisstate = value: '' } { return <div> <input value=thisstatevalue onChange= this/> <Debounce ms=1000> <List search=thisstatevalue/> </Debounce> </div> ; } Component { superprops; thisstate = items: ; } { if prevProps !== thisprops // Prevent rendering after setState() ; } { return <ul> thisstateitems </ul> ; } ;
Props
ms
Time to wait (delay) in milliseconds until the component inside <Debounce> gets rendered.
required | no |
default | 250 |
type | number |
initialComponent
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.
License
react-debounce-component is MIT licensed.