React Performance Hooks
Debounce and throttle your functions to gain performance boost!
Features
-
🚀 Simple, fast and light -
🏭 Debounce and Throttle -
🪗 Lifecycle events handling
Install
npm install --save @better-typed/react-performance-hooksor
yarn add @better-typed/react-performance-hooksuseDebounce
This hook allows debouncing of the given function.
import React from "react";
import { useDebounce } from "@better-typed/react-performance-hooks";
const MyComponent: React.FC = ({ delay }) => {
const {debounce, reset, active} = useDebounce(delay)
// Standard usage
const onTyping = () => {
debounce(() => {
// debounced logic
})
}
// Dynamic delay value
const onTypingDynamic = (value: string, customDelay: number) => {
debounce(() => {
// debounced logic
}, customDelay)
}
return (
// ...
)
}useThrottle
This hook allows debouncing of the given function.
import React from "react";
import { useThrottle } from "@better-typed/react-performance-hooks";
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 (
// ...
)
}