Norse Power Metal

    rescript-debounce

    1.0.1 • Public • Published

    rescript-debounce

    version license build

    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 = Debounce.make(fn)
    
    // You can configure timeout. Default is 100ms.
    let fn = Debounce.make(~wait=500, fn)
    
    // This call is debounced
    fn()

    Also, you can get more control over the debouncing:

    let fn = Debounce.makeControlled(fn)
    
    // 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.

    Install

    npm i rescript-debounce

    DownloadsWeekly Downloads

    573

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    6.14 kB

    Total Files

    5

    Last publish

    Collaborators

    • alex.fedoseev