Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@react-hook/throttle
Advanced tools
@react-hook/throttle - npm Package Compare versions
Comparing version 2.1.0 to 2.1.1
@@ -13,62 +13,49 @@ 'use strict' | ||
| const {useEffect, useCallback, useState, useRef} = _react.default | ||
| const perf = typeof performance !== 'undefined' ? performance : Date | ||
| const now = () => perf.now() | ||
| const useThrottleCallback = (callback, fps = 30, leading = false) => { | ||
| const nextTimeout = useRef(null), | ||
| tailTimeout = useRef(null), | ||
| calledLeading = useRef(false), | ||
| wait = 1000 / fps // cleans up pending timeouts when the function changes | ||
| const wait = 1000 / fps | ||
| const prev = useRef(0) | ||
| const trailingTimeout = useRef(void 0) | ||
| function _ref() { | ||
| if (nextTimeout.current !== null) { | ||
| clearTimeout(nextTimeout.current) | ||
| nextTimeout.current = null | ||
| } | ||
| const clearTrailing = () => clearTimeout(trailingTimeout.current) | ||
| if (tailTimeout.current !== null) { | ||
| clearTimeout(tailTimeout.current) | ||
| tailTimeout.current = null | ||
| } | ||
| const deps = [callback, fps, leading] // Reset any time the deps change | ||
| calledLeading.current = false | ||
| function _ref() { | ||
| prev.current = 0 | ||
| clearTrailing() | ||
| } | ||
| useEffect(() => _ref, [callback, fps]) | ||
| return useCallback( | ||
| function () { | ||
| // eslint-disable-next-line @typescript-eslint/no-this-alias | ||
| const self = this // eslint-disable-next-line prefer-rest-params | ||
| useEffect(() => _ref, deps) | ||
| return useCallback(function () { | ||
| // eslint-disable-next-line @typescript-eslint/no-this-alias | ||
| const self = this // eslint-disable-next-line prefer-rest-params | ||
| const args = arguments | ||
| const args = arguments | ||
| const rightNow = now() | ||
| function _ref2() { | ||
| nextTimeout.current = null | ||
| tailTimeout.current === null && (calledLeading.current = false) | ||
| callback.apply(self, args) | ||
| } | ||
| const call = () => { | ||
| prev.current = rightNow | ||
| clearTrailing() | ||
| callback.apply(self, args) | ||
| } | ||
| function _ref3() { | ||
| tailTimeout.current = null | ||
| calledLeading.current = false | ||
| nextTimeout.current === null && callback.apply(self, args) | ||
| } | ||
| const current = prev.current // leading | ||
| if (nextTimeout.current === null) { | ||
| const next = _ref2 | ||
| if (leading && current === 0) return call() // body | ||
| if (leading && !calledLeading.current) { | ||
| // leading | ||
| next() | ||
| calledLeading.current = true | ||
| } else { | ||
| // head | ||
| nextTimeout.current = setTimeout(next, wait) | ||
| } | ||
| } else { | ||
| // tail | ||
| tailTimeout.current !== null && clearTimeout(tailTimeout.current) | ||
| tailTimeout.current = setTimeout(_ref3, wait) | ||
| } | ||
| }, | ||
| [callback, fps] | ||
| ) | ||
| if (rightNow - current > wait) { | ||
| if (current > 0) return call() | ||
| prev.current = rightNow | ||
| } // trailing | ||
| clearTrailing() | ||
| trailingTimeout.current = setTimeout(() => { | ||
| callback.apply(self, args) | ||
| prev.current = 0 | ||
| }, wait) | ||
| }, deps) | ||
| } | ||
@@ -79,7 +66,4 @@ | ||
| const useThrottle = (initialState, fps, leading) => { | ||
| const _ref_0 = useState(initialState) | ||
| const setState = _ref_0[1] | ||
| const state = _ref_0[0] | ||
| return [state, useThrottleCallback(setState, fps, leading)] | ||
| const ref = useState(initialState) | ||
| return [ref[0], useThrottleCallback(ref[1], fps, leading)] | ||
| } | ||
@@ -86,0 +70,0 @@ |
| import React from 'react' | ||
| const {useEffect, useCallback, useState, useRef} = React | ||
| const perf = typeof performance !== 'undefined' ? performance : Date | ||
| const now = () => perf.now() | ||
| export const useThrottleCallback = (callback, fps = 30, leading = false) => { | ||
| const nextTimeout = useRef(null), | ||
| tailTimeout = useRef(null), | ||
| calledLeading = useRef(false), | ||
| wait = 1000 / fps // cleans up pending timeouts when the function changes | ||
| const wait = 1000 / fps | ||
| const prev = useRef(0) | ||
| const trailingTimeout = useRef(void 0) | ||
| function _ref() { | ||
| if (nextTimeout.current !== null) { | ||
| clearTimeout(nextTimeout.current) | ||
| nextTimeout.current = null | ||
| } | ||
| const clearTrailing = () => clearTimeout(trailingTimeout.current) | ||
| if (tailTimeout.current !== null) { | ||
| clearTimeout(tailTimeout.current) | ||
| tailTimeout.current = null | ||
| } | ||
| const deps = [callback, fps, leading] // Reset any time the deps change | ||
| calledLeading.current = false | ||
| function _ref() { | ||
| prev.current = 0 | ||
| clearTrailing() | ||
| } | ||
| useEffect(() => _ref, [callback, fps]) | ||
| return useCallback( | ||
| function () { | ||
| // eslint-disable-next-line @typescript-eslint/no-this-alias | ||
| const self = this // eslint-disable-next-line prefer-rest-params | ||
| useEffect(() => _ref, deps) | ||
| return useCallback(function () { | ||
| // eslint-disable-next-line @typescript-eslint/no-this-alias | ||
| const self = this // eslint-disable-next-line prefer-rest-params | ||
| const args = arguments | ||
| const args = arguments | ||
| const rightNow = now() | ||
| function _ref2() { | ||
| nextTimeout.current = null | ||
| tailTimeout.current === null && (calledLeading.current = false) | ||
| callback.apply(self, args) | ||
| } | ||
| const call = () => { | ||
| prev.current = rightNow | ||
| clearTrailing() | ||
| callback.apply(self, args) | ||
| } | ||
| function _ref3() { | ||
| tailTimeout.current = null | ||
| calledLeading.current = false | ||
| nextTimeout.current === null && callback.apply(self, args) | ||
| } | ||
| const current = prev.current // leading | ||
| if (nextTimeout.current === null) { | ||
| const next = _ref2 | ||
| if (leading && current === 0) return call() // body | ||
| if (leading && !calledLeading.current) { | ||
| // leading | ||
| next() | ||
| calledLeading.current = true | ||
| } else { | ||
| // head | ||
| nextTimeout.current = setTimeout(next, wait) | ||
| } | ||
| } else { | ||
| // tail | ||
| tailTimeout.current !== null && clearTimeout(tailTimeout.current) | ||
| tailTimeout.current = setTimeout(_ref3, wait) | ||
| } | ||
| }, | ||
| [callback, fps] | ||
| ) | ||
| if (rightNow - current > wait) { | ||
| if (current > 0) return call() | ||
| prev.current = rightNow | ||
| } // trailing | ||
| clearTrailing() | ||
| trailingTimeout.current = setTimeout(() => { | ||
| callback.apply(self, args) | ||
| prev.current = 0 | ||
| }, wait) | ||
| }, deps) | ||
| } | ||
| export const useThrottle = (initialState, fps, leading) => { | ||
| const _ref_0 = useState(initialState) | ||
| const setState = _ref_0[1] | ||
| const state = _ref_0[0] | ||
| return [state, useThrottleCallback(setState, fps, leading)] | ||
| const ref = useState(initialState) | ||
| return [ref[0], useThrottleCallback(ref[1], fps, leading)] | ||
| } | ||
| export default useThrottle |
| { | ||
| "name": "@react-hook/throttle", | ||
| "version": "2.1.0", | ||
| "version": "2.1.1", | ||
| "homepage": "https://github.com/jaredLunde/react-hook/tree/master/packages/throttle#readme", | ||
@@ -17,3 +17,5 @@ "repository": "github:jaredLunde/react-hook", | ||
| "throttle react state", | ||
| "react throttle hook" | ||
| "react throttle hook", | ||
| "use throttle", | ||
| "usethrottle" | ||
| ], | ||
@@ -20,0 +22,0 @@ "main": "dist/main/index.js", |
@@ -47,3 +47,3 @@ <hr> | ||
| ### `useThrottle(initialState, fps?, leading?)` | ||
| ### useThrottle(initialState, fps?, leading?) | ||
@@ -55,6 +55,3 @@ ```ts | ||
| leading?: boolean | ||
| ): [State, Dispatch<SetStateAction<State>>] => { | ||
| const [state, setState] = useState<State>(initialState) | ||
| return [state, useThrottleCallback(setState, fps, leading)] | ||
| } | ||
| ): [State, Dispatch<SetStateAction<State>>] | ||
| ``` | ||
@@ -64,18 +61,18 @@ | ||
| | Property | Type | Default | Description | | ||
| | ------------ | --------- | ------- | -------------------------------------------------------------------------------------------------------------------------- | | ||
| | initialState | `State` | | The initial state stored in `useState` | | ||
| | fps | `number` | `30` | Defines the rate in frames per second with which `setState` is invoked with new state | | ||
| | leading | `boolean` | `false` | Calls `setState` on the leading edge (right away). When `false`, `setState` will not be called until the next frame is due | | ||
| | Property | Type | Default | Description | | ||
| | ------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- | | ||
| | initialState | `State | (() => State)` | | The initial state provided to `React.useState()` | | ||
| | fps | `number` | `30` | Defines the rate in frames per second with which `setState` is invoked with new state | | ||
| | leading | `boolean` | `false` | Calls `setState` on the leading edge (right away). When `false`, `setState` will not be called until the next frame is due | | ||
| #### Returns `[state, setState]` | ||
| | Variable | Type | Description | | ||
| | -------- | --------------------------------- | ------------------------------------------------- | | ||
| | state | `State` | The value set by `setState` or the `initialState` | | ||
| | setState | `Dispatch<SetStateAction<State>>` | A throttled `setState` callback | | ||
| | Variable | Type | Description | | ||
| | -------- | --------------------------------- | ------------------------------- | | ||
| | state | `State` | The current value in state | | ||
| | setState | `Dispatch<SetStateAction<State>>` | A throttled `setState` callback | | ||
| --- | ||
| ### `useThrottleCallback(callback, fps?, leading?)` | ||
| ### useThrottleCallback(callback, fps?, leading?) | ||
@@ -82,0 +79,0 @@ ```ts |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-7.96%
12335
- Lines of code
- decreased by-24.11%
107
- Number of lines in readme file
- decreased by-2.88%
101
No dependency changes