useRaf

Throttles callbacks to the next animation frame with cancel-then-request deduplication. Cleans up automatically on scope disposal.

Copy Markdown

PreviewIntermediateJun 29, 2026

Usage

The useRaf composable wraps requestAnimationFrame with a cancel-then-request pattern that deduplicates rapid calls. It returns a callable function that requests an animation frame, automatically canceling any pending frame.

useRaf

<script setup lang="ts">
  import { useRaf } from '@vuetify/v0'
  import { ref } from 'vue'

  const position = ref(0)

  const updatePosition = useRaf((timestamp) => {
    position.value = Math.sin(timestamp / 1000) * 100
  })

  // Call to request frame (cancels pending)
  updatePosition()

  // Manual cancel if needed
  updatePosition.cancel()

  // Check if frame is pending
  console.log(updatePosition.isActive.value)
</script>

Architecture

useRaf provides a lightweight wrapper around requestAnimationFrame:

Examples

Scroll Throttle

A tall scrollable container that tracks three metrics — scrollTop in pixels, scroll percentage, and a running update count — to make the RAF deduplication visible. Each scroll DOM event calls the useRaf-wrapped updater, which cancels any pending frame before scheduling a new one. Scrolling rapidly produces many events per frame, but the counter increments at most once per animation frame rather than once per event.

useRaf returns a function wrapping the callback; calling it repeatedly within the same frame costs only one cancelAnimationFrame + one requestAnimationFrame, so scroll handlers, resize reactions, and pointer-move listeners are all safe to call at native event rate. The isActive ref on the returned function reflects whether a frame is currently pending. No cleanup is needed — the composable cancels any outstanding frame on scope disposal. For element-size tracking that pairs naturally with this, see useResizeObserver; for event listener registration with the same scope-safe cleanup, see useEventListener.

Scroll: 0px

Progress: 0%

RAF updates: 0

Item 1