useRafInterval
A hook implements with requestAnimationFrame for better performance. The API is consistent with useInterval, the advantage is that the execution of the timer can be stopped when the page is not rendering, such as page hiding or minimization.
Overview
A hook implements with requestAnimationFrame for better performance. The API is consistent with useInterval, the advantage is that the execution of the timer can be stopped when the page is not rendering, such as page hiding or minimization.
Installation
Open inpnpm dlx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useRafInterval.jsonnpx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useRafInterval.jsonyarn shadcn@latest add https://shadcn-ahooks.vercel.app/r/useRafInterval.jsonbun shadcn@latest add https://shadcn-ahooks.vercel.app/r/useRafInterval.jsonA hook implements with requestAnimationFrame for better performance. The API is consistent with useInterval, the advantage is that the execution of the timer can be stopped when the page is not rendering, such as page hiding or minimization.
Please note that the following two cases are likely to be inapplicable, and useInterval is preferred:
- the time interval is less than
16ms - want to execute the timer when page is not rendering;
requestAnimationFramewill automatically downgrade tosetIntervalin node environment
Examples
Default usage
Advanced usage
API
useRafInterval(
fn: () => void,
delay?: number | undefined,
options?: Options
): fn: () => void;Params
| Property | Description | Type |
|---|---|---|
| fn | The function to be executed every delay milliseconds. | () => void |
| delay | The time in milliseconds, the timer should delay in between executions of the specified function. The timer will be cancelled if delay is set to undefined. | number | undefined |
| options | Config of the interval behavior. | Options |
Options
| Property | Description | Type | Default |
|---|---|---|---|
| immediate | Whether the function should be executed immediately on first execution | boolean | false |
Result
| Property | Description | Type |
|---|---|---|
| clearInterval | clear interval | () => void |