rescript-debounce
Version:
Debounce for ReScript
99 lines (71 loc) • 2.72 kB
Markdown
# rescript-debounce
[](https://www.npmjs.com/package/rescript-debounce)
[](https://www.npmjs.com/package/rescript-debounce)
[](https://github.com/shakacode/rescript-debounce/actions/workflows/ci.yml)
Debounce for ReScript. For usage with React, see [`rescript-debounce-react`](https://www.npmjs.com/package/rescript-debounce-react).
> ### ShakaCode
> If you are looking for help with the development and optimization of your project, [ShakaCode](https://www.shakacode.com) can help you to take the reliability and performance of your app to the next level.
>
> If you are a developer interested in working on ReScript / TypeScript / Rust / Ruby on Rails projects, [we're hiring](https://www.shakacode.com/career/)!
## Installation
```shell
# yarn
yarn add rescript-debounce
# or npm
npm install --save rescript-debounce
```
Then add it to `bsconfig.json`:
```json
"bs-dependencies": [
"rescript-debounce"
]
```
## Usage
```rescript
// Pass function you want to debounce
let fn = fn->Debounce.make
// You can configure timeout. Default is 100ms.
let fn = fn->Debounce.make(~wait=500)
// This call is debounced
fn()
```
Also, you can get more control over the debouncing:
```rescript
let fn = fn->Debounce.makeControlled
// Schedule invocation
fn.schedule()
// Cancel invocation
fn.cancel()
// Check if invocation is scheduled
fn.scheduled() // => false
// Invoke immediately
fn.invoke()
```
Note that if you invoke immediately all scheduled invocations (if any) are canceled.
## Caveats
#### I need to pass multiple arguments to debounced function
Pack those in a tuple:
```rescript
let fn = Debounce.make(((one, two)) => /* use `one` & `two` */)
fn(("one", "two"))
```
#### It doesn't work, function is not debounced
The result of `Debounce.make(fn)` call **must** be bound to a variable (or a record property, a ref etc) for the later invocations. I.e. don't inline `Debounce.make(fn)` calls in `React.useEffect` and such, this won't work since debounced function will be re-created on every re-render:
```rescript
@react.component
let make = () => {
let (state, dispatch) = reducer->React.useReducer(initialState)
// Don't do this
let fn = Debounce.make(() => DoStuff->dispatch)
React.useEffect1(
() => {
fn()
None
},
[state],
)
}
```
If you want to define debounced function within component's body, use [`rescript-debounce-react`](https://www.npmjs.com/package/rescript-debounce-react).
## License
MIT.