A state container which limits the frequency with which setState can be called
using lodash's debounce function. By default, setState is invoked on the
trailing edge of the debounce call. If leading and trailing options are true,
func is invoked on the trailing edge of the timeout only if the debounced
function is invoked more than once during the wait timeout.
See lodash's documentation for more details
yarn add @render-props/debounce or npm i @render-props/debounce
import Debounce from '@render-props/debounce'
function DebouncedBodyScroller () {
return (
<Debounce initialState={{scrollY: 0, gt30: false}}>
{({debounceState, state}) => (
<body
onScroll={
e => debounceState(
prevState => (
window.scrollY > 30
? {gt30: true, scrollY: window.scrollY}
: {gt30: false, scrollY: window.scrollY}
)
)
}
>
Greater than 30? {String(state.gt30)}
</body>
)}
</Debounce>
)
}initialState {object}: the state which this component should initialize with. This component is NOT controlled so you cannot update the state of this component by changing the property value here.wait {number}: number of milliseconds to delaymaxWait {number}: maximum time func is allowed to be delayed before it's invokedleading {bool}: invokes function on the leading edge of the timeouttraililng {bool}: invokes function on the trailing edge of the timeout
debounceState: this function is setState wrapped in lodash's debounce function.
state {object}: in addition to thedebounceStatemethod, this component provides the state exactly as its been set usingdebounceState