Lightweight React Hooks for debouncing and throttling inputs
MIT License
npm install react-relaxed
yarn add react-relaxed
Try with Codesandbox
Delays updating the returned debouncedValue
variable until a given number of miliseconds have elapsed since the last time the value
argument was changed.
import { useState } from "react";
import { useDebounce } from "react-relaxed";
const App = () => {
const [value, setValue] = useState("initial value");
const [debouncedValue] = useDebounce(value, 500);
return (
<div>
<input value={value} onChange={(event) => setValue(event.target.value)} />
<p>{value}</p>
<p>{debouncedValue}</p>
</div>
);
};
With useDebounceState
you do not need a seperate useState
hook to keep track of the state. Apart form that, it's the same as useDebounce
.
import { useDebounceState } from "react-relaxed";
const App = () => {
const [value, setValue, debouncedValue] = useDebounceState("initial value", 500);
return (
<div>
<input value={value} onChange={(event) => setValue(event.target.value)} />
<p>{value}</p>
<p>{debouncedValue}</p>
</div>
);
};
The returned throttledValue
gets updated at must once every given number of miliseconds, assuming the value
argument changes more often than that.
import { useState } from "react";
import { useThrottle } from "react-relaxed";
const App = () => {
const [value, setValue] = useState("initial value");
const [throttledValue] = useThrottle(value, 500);
return (
<div>
<input value={value} onChange={(event) => setValue(event.target.value)} />
<p>{value}</p>
<p>{throttledValue}</p>
</div>
);
};
With useThrottleState
you do not need a seperate useState
hook to keep track of the state. Apart form that, it's the same as useThrottle
.
import { useThrottleState } from "react-relaxed";
const App = () => {
const [value, setValue, throttledValue] = useThrottleState("initial value", 500);
return (
<div>
<input value={value} onChange={(event) => setValue(event.target.value)} />
<p>{value}</p>
<p>{throttledValue}</p>
</div>
);
};
const [debouncedValue] = useDebounce(value, delay, {
onChange,
leading,
trailing,
maxWait,
});
debouncedValue: T = any
value: T = any
delay: number
value
was changed before debouncedValue
gets updatedleading: boolean = false
debouncedValue
at the leading edgedelay
trailing: boolean = true
debouncedValue
at the leading edgedelay
onChange: fn(value) => void
maxWait: number
debouncedValue
gets updated, even if there is continous inputconst [value, setValue, debouncedValue] = useDebounceState(initialValue, delay, {
onChange,
leading,
trailing,
maxWait,
});
value: T = any
setValue: React.SetStateAction
debouncedValue: T = any
initialValue: T = any
delay: number
value
was changed before debouncedValue
gets updatedleading: boolean = false
debouncedValue
at the leading edgedelay
trailing: boolean = true
debouncedValue
at the leading edgedelay
onChange: fn(value) => void
maxWait: number
debouncedValue
gets updated, even if there is continous inputconst [throttledValue] = useThrottle(value, delay, {
onChange,
leading,
trailing,
});
throttled: T = any
value: T = any
delay: number
throttledValue
, provided value
argument changes more often than thatleading: boolean = false
debouncedValue
at the leading edgedelay
trailing: boolean = true
debouncedValue
at the leading edgedelay
onChange: fn(value) => void
const [value, setValue, throttledValue] = useThrottleState(initialValue, delay, {
onChange,
leading,
trailing,
});
value: T = any
setValue: React.SetStateAction
throttled: T = any
initialValue: T = any
delay: number
value
was changed before throttledValue
gets updatedleading: boolean = false
throttledValue
at the leading edgedelay
trailing: boolean = true
debouncedValue
at the leading edgedelay
onChange: fn(value) => void
This package used create-react-hook CLI for setting up the build proccess.
react-relaxed
is available under the MIT license. See the LICENSE file for more info.