useRafTimeout

Overview

A hook implements with requestAnimationFrame for better performance. The API is consistent with useTimeout. the advantage is that will not trigger function 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/useRafTimeout.json

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

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

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

A hook implements with requestAnimationFrame for better performance. The API is consistent with useTimeout. the advantage is that will not trigger function when the page is not rendering, such as page hiding or minimization.

requestAnimationFrame will automatically downgrade to setTimeout in node environment

Examples

Default usage

Advanced usage

API

useRafTimeout(
  fn: () => void,
  delay?: number | undefined,
): fn: () => void;

Params

| Property | Description | Type | | -- | -- | | fn | The function to be executed after delay milliseconds. | () => void | | delay | The number of milliseconds to wait before executing the function. The timer will be cancelled if delay is undefined. | number | undefined |

Result

| Property | Description | Type | | | - | | | clearTimeout | clear timeout | () => void |