rescript-throttle

Throttle for ReScript. For usage with React, see rescript-throttle-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-throttle
# or npm
npm install --save rescript-throttle

Then add it to rescript.json:

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

Usage

// Pass function you want to throttle
let fn = fn->Throttle.make

// You can configure timeout. Default is 100ms.
let fn = fn->Throttle.make(~wait=500)

// This call is throttled
fn()

Also, you can get more control over the throttling:

let fn = fn->Throttle.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 throttled function

Pack those in a tuple:

let fn = Throttle.make(((one, two)) => /* use `one` & `two` */)
fn(("one", "two"))

It doesn't work, function is not throttled

The result of Throttle.make(fn) call must be bound to a variable (or a record property, a ref etc) for later invocations. I.e. don't inline Throttle.make(fn) calls in React.useEffect and such, this won't work since throttled 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 = Throttle.make(() => DoStuff->dispatch)

  React.useEffect(
    () => {
      fn()
      None
    },
  )
}

If you want to define trottled function within component's body, use rescript-throttle-react.

License

MIT.