Tiny render-prop/HOC/hook component for props/state debouncing
npm i react-debounce-props --save
Then, use it as usual:
// using ES6 modules
import { Debounce } from 'react-debounce-props'
// using CommonJS modules
const { Debounce } = require('react-debounce-props')
The UMD build is also available on unpkg:
<script src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-debounce-props"></script>
The package is avalable on window.ReactDebounceProps
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { useDebounce } from "react-debounce-props";
let App = () => {
let [value, setValue] = useState("");
let debouncedValue = useDebounce(value, 250);
return (
<div className="App">
<input
value={value}
onChange={e => setValue(e.target.value)}
placeholder="Type smth..."
/>
<div>
Normal value: <b>{value}</b>
</div>
<div>
Debounced value: <b>{debouncedValue}</b>
</div>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
This lib can easily replace react-debounce-input cause it is more generic.
import React from 'react'
import ReactDOM from 'react-dom'
import Debounce from 'react-debounce-props'
class App extends React.Component {
state = {}
render() {
return (
<div>
<input
value={this.state.value}
onChange={e => this.setState({ value: e.target.value })}
placeholder="Type smth..."
/>
<div>
Normal value: <b>{this.state.value}</b>
</div>
<Debounce debouncedValue={this.state.value} wait={250}>
{({ debouncedValue }) => (
<div>
Debounced value: <b>{debouncedValue}</b>
</div>
)}
</Debounce>
</div>
)
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
You can also debounce props passed from parent components:
import Debounce from 'react-debounce-props'
let MyComponent = ({ frequentlyUpdatedProp }) => (
<Debounce lessFrequentlyUpdatedProp={frequentlyUpdatedProp} wait={250}>
{({ lessFrequentlyUpdatedProp }) => (
<b>{lessFrequentlyUpdatedProp}!</b>
)}
</Debounce>
)
as well as from other render-props (e.g. from new React context):
import Debounce from 'react-debounce-props'
let MyComponent = () => (
<SomeContextConsumer>
{frequentlyUpdatedProp => (
<Debounce lessFrequentlyUpdatedProp={frequentlyUpdatedProp} wait={250}>
{({ lessFrequentlyUpdatedProp }) => (
<b>{lessFrequentlyUpdatedProp}!</b>
)}
</Debounce>
)}
</SomeContextConsumer>
)
Cause render-props approach is more powerful this lib can replace HOC of react-debounced-props as well.
Use withDebouncedProps
for that:
import { withDebouncedProps } from 'react-debounce-props'
const MyDebouncedComponent = withDebouncedProps(
{ frequentlyUpdatedProp: 42 }, 200
)(MyComponent);