🎊 React Performance Hooks
About
Debounce and throttle your functions, state and effects to gain performance boost!
Key Features
Installation
npm install --save @better-hooks/performanceor
yarn add @better-hooks/performanceExamples
useDebounce
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 (
// ...
)
}useDebounceState
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 (
// ...
)
}useDebounceEffect
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 (
// ...
)
}useThrottle
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 (
// ...
)
}useThrottleState
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 (
// ...
)
}useThrottleEffect
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 (
// ...
)
}