Debounce and throttle your functions, state and effects to gain performance boost!
🔮 Simple usage
🚀 Fast and light
✨ Debounce and Throttle
🎊 Lifecycle debounce and throttle
📡 State debounce and throttle
npm install --save @better-hooks/performanceor
yarn add @better-hooks/performanceThis hook deeply compares the dependencies optimizing rerendering effects
import React from "react";
import { useDebounce } from "@better-hooks/performance";
const MyComponent: React.FC = () => {
const {debounce, reset, active} = useDeepEffect(() => {
// do something
}, [{a: 123}]) // <--- we will check if the deps are equal between rerenders
return (
// ...
)
}This hook allows debouncing of the given function. Function will be called after some amount of time from the last execution. We can adjust debounce time with additional props.
import React from "react";
import { useDebounce } from "@better-hooks/performance";
const MyComponent: React.FC = () => {
const {debounce, reset, active} = useDebounce({ delay: 600 })
// Standard usage
const onTyping = () => {
debounce(() => {
// debounced logic
})
}
// Dynamic delay value
const onTypingDynamic = (value: string, customDelay: number) => {
debounce(() => {
// debounced logic
}, { delay: customDelay })
}
return (
// ...
)
}This hook allows debouncing of state. Value will be saved after some amount of time from the last execution of set function. We can adjust debounce time with additional props.
import React from "react";
import { useWindowEvent } from "@better-hooks/window";
import { useDebounceState } from "@better-hooks/performance";
const MyComponent: React.FC = () => {
const [value, setValue] = useDebounceState("20px")
useWindowEvent("scroll", (e) => {
setValue(e.scrollY + "px");
})
return (
// ...
)
}This hook allows debouncing of lifecycle effect.
import React from "react";
import { useDebounceEffect } from "@better-hooks/performance";
const MyComponent: React.FC = (props) => {
useDebounceEffect(() => {
// Do something
}, { delay: 200 }, [props])
return (
// ...
)
}This hook allows debouncing of the given function.
import React from "react";
import { useThrottle } from "@better-hooks/performance";
const MyComponent: React.FC = ({ delay }) => {
const {throttle, reset, active} = useThrottle(delay)
// Standard usage
const onScroll = () => {
throttle(() => {
// throttle logic
})
}
// Dynamic delay value
const onScrollDynamic = (value: string, customDelay: number) => {
throttle(() => {
// throttle logic
}, customDelay)
}
return (
// ...
)
}This hook allows throttling of state. We can adjust execution interval time and execution timeout time with additional props.
import React from "react";
import { useWindowEvent } from "@better-hooks/window";
import { useThrottleState } from "@better-hooks/performance";
const MyComponent: React.FC = () => {
const [value, setValue] = useThrottleState("20px")
useWindowEvent("scroll", (e) => {
setValue(e.scrollY + "px");
})
return (
// ...
)
}import React from "react";
import { useWindowEvent } from "@better-hooks/window";
import { useThrottleState } from "@better-hooks/performance";
const MyComponent: React.FC = () => {
const [value, setValue] = useThrottleState("20px", {
interval: 200, // We will save values at least once per 200ms
timeout: 400 // Last set state action will get triggered after 400ms, we can also disable it
})
useWindowEvent("scroll", (e) => {
setValue(e.scrollY + "px");
})
return (
// ...
)
}This hook allows debouncing of lifecycle effect.
import React from "react";
import { useThrottleEffect } from "@better-hooks/performance";
const MyComponent: React.FC = (props) => {
useThrottleEffect(() => {
// Do something
}, { interval: 200, timeout: false }, [props])
return (
// ...
)
}
