https://github.com/bettertyped/react-performance-hooks
🎊 React hooks that will make you extremely easy to debounce and throttle your functions to gain instant performance boost!
https://github.com/bettertyped/react-performance-hooks
debounce hooks performance react throttle usedebounce usedebouncestate usethrottle usethrottlestate
Last synced: 7 months ago
JSON representation
🎊 React hooks that will make you extremely easy to debounce and throttle your functions to gain instant performance boost!
- Host: GitHub
- URL: https://github.com/bettertyped/react-performance-hooks
- Owner: BetterTyped
- License: mit
- Created: 2022-07-29T20:24:43.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-18T17:32:43.000Z (over 1 year ago)
- Last Synced: 2025-01-21T12:25:00.921Z (over 1 year ago)
- Topics: debounce, hooks, performance, react, throttle, usedebounce, usedebouncestate, usethrottle, usethrottlestate
- Language: TypeScript
- Homepage:
- Size: 289 KB
- Stars: 22
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: Code_of_Conduct.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# 🎊 React Performance Hooks
## About
Debounce and throttle your functions, state and effects to gain performance boost!
## Key Features
🔮 **Simple usage**
🚀 **Fast and light**
✨ **Debounce and Throttle**
🎊 **Lifecycle debounce and throttle**
📡 **State debounce and throttle**
## Installation
```bash
npm install --save @better-hooks/performance
```
or
```bash
yarn add @better-hooks/performance
```
---
## Examples
#### useDeepEffect
This hook deeply compares the dependencies optimizing rerendering effects
```tsx
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 (
// ...
)
}
```
---
#### 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.
```tsx
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.
```tsx
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.
```tsx
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.
```tsx
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.
```tsx
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 (
// ...
)
}
```
```tsx
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.
```tsx
import React from "react";
import { useThrottleEffect } from "@better-hooks/performance";
const MyComponent: React.FC = (props) => {
useThrottleEffect(() => {
// Do something
}, { interval: 200, timeout: false }, [props])
return (
// ...
)
}
```