useRaf
Throttles callbacks to the next animation frame with cancel-then-request deduplication. Cleans up automatically on scope disposal.
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.
<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 scrollable container that tracks position, percentage, and update count — demonstrating RAF throttling of rapid scroll events.
Item 1
Scroll to see RAF throttling in action
Item 2
Scroll to see RAF throttling in action
Item 3
Scroll to see RAF throttling in action
Item 4
Scroll to see RAF throttling in action
Item 5
Scroll to see RAF throttling in action
Item 6
Scroll to see RAF throttling in action
Item 7
Scroll to see RAF throttling in action
Item 8
Scroll to see RAF throttling in action
Item 9
Scroll to see RAF throttling in action
Item 10
Scroll to see RAF throttling in action
Item 11
Scroll to see RAF throttling in action
Item 12
Scroll to see RAF throttling in action
Item 13
Scroll to see RAF throttling in action
Item 14
Scroll to see RAF throttling in action
Item 15
Scroll to see RAF throttling in action
Item 16
Scroll to see RAF throttling in action
Item 17
Scroll to see RAF throttling in action
Item 18
Scroll to see RAF throttling in action
Item 19
Scroll to see RAF throttling in action
Item 20
Scroll to see RAF throttling in action
Scroll rapidly - notice how RAF updates are throttled to one per frame
Key Features
Cancel-Then-Request Pattern
Each call cancels any pending frame before requesting a new one. This deduplicates rapid calls, ensuring only the latest request executes:
const update = useRaf(() => {
// This callback only runs once per frame
})
// These rapid calls result in only ONE frame callback
update()
update()
update()Automatic Cleanup
The composable automatically cancels pending frames when the Vue scope is disposed (component unmount, effect scope stop):
// No manual cleanup needed - handled automatically
const update = useRaf(callback)SSR Safe
The composable is a no-op in non-browser environments. isActive always returns false during SSR.