Halogen.Hooks.Extra.Hooks.UseThrottle

useThrottle :: forall m a. MonadAff m => Milliseconds -> (a -> HookM m Unit) -> Hook m (UseThrottle a) (a -> HookM m Unit)

Limits the amount of times an action is performed per time period. Use this hook when you need to run the same action repeatedly with a different input, but you are concerned about performance or resource usage.

Example Usage

The below example shows how to update the label with the mouse position, limiting the number of times the label is updated to once every 100ms.

myComponent = Hooks.component \_ _ -> Hooks.do
  position /\ positionId <- useState { x: zero, y: zero }
  throttledMouseMove <- useThrottle (Milliseconds 100.0) \e -> do
    Hooks.modify_ positionId (_ { x = MouseEvent.pageX e, y = MouseEvent.pageY e}))

  Hooks.pure $
    HH.div
      [ HE.onMouseMove $ Just <<< throttledMouseMove ]
      [ HH.label_
        [ HH.text $ "Mouse position: (" <>
             show position.x <> ", " <> show position.y <> ")"
        ]
      ]

data UseThrottle :: Type -> HookType