useRafInterval

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.

Documentation and Examples

Installation

pnpm dlx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useRafInterval.json

npx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useRafInterval.json

yarn shadcn@latest add https://shadcn-ahooks.vercel.app/r/useRafInterval.json

bun shadcn@latest add https://shadcn-ahooks.vercel.app/r/useRafInterval.json

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.

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;

requestAnimationFrame will automatically downgrade to setInterval in node environment

Examples

Default usage

Advanced usage

API

useRafInterval(
  fn: () => void,
  delay?: number | undefined,
  options?: Options
): fn: () => void;

Params

| Property | Description | Type | | -- | - | | | - | | immediate | Whether the function should be executed immediately on first execution | boolean | false |

Result

| Property | Description | Type | | - | -- | | | clearInterval | clear interval | () => void |