rescript-debounce

rescript-debounce

Debounce for ReScript. For usage with React, see rescript-debounce-react.

ShakaCode

If you are looking for help with the development and optimization of your project, ShakaCode 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!

Installation

# yarn
yarn add rescript-debounce
# or npm
npm install --save rescript-debounce

Then add it to bsconfig.json:

"bs-dependencies": [
  "rescript-debounce"
]

Usage

// 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:

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:

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:

@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.

License

MIT.