@react-spring/rafz

What is @react-spring/rafz?

@react-spring/rafz is a utility for managing requestAnimationFrame loops in React applications. It provides a simple and efficient way to handle animations and other frame-based updates.

What are @react-spring/rafz's main functionalities?

Basic Usage

This feature allows you to schedule a function to run on the next animation frame using the `raf` function.

import { raf } from '@react-spring/rafz';

raf(() => {
  console.log('This will run on the next animation frame');
});

Looping

This feature demonstrates how to create a continuous loop that runs on every animation frame.

import { raf } from '@react-spring/rafz';

let count = 0;
const loop = () => {
  console.log('Frame:', count++);
  raf(loop);
};
raf(loop);

Canceling a Frame

This feature shows how to cancel a scheduled frame using the `cancel` function.

import { raf, cancel } from '@react-spring/rafz';

const id = raf(() => {
  console.log('This will not run');
});
cancel(id);

Other packages similar to @react-spring/rafz

raf

The `raf` package is a simple polyfill for requestAnimationFrame. It provides a basic interface for scheduling functions to run on the next animation frame. Unlike @react-spring/rafz, it does not offer additional utilities for managing loops or canceling frames.

framesync

The `framesync` package is a lightweight utility for managing frame-based updates. It offers a similar API to @react-spring/rafz, including functions for scheduling and canceling frames. However, it is more focused on providing a low-level interface for frame synchronization.

react-use

The `react-use` package is a collection of React hooks, including hooks for managing animations and frame-based updates. It provides a higher-level abstraction compared to @react-spring/rafz, making it easier to integrate with React components.

README

@react-spring/rafz

Coordinate requestAnimationFrame calls across your app and/or libraries.

• < 700 bytes min+gzip
• Timeout support
• Batching support (eg: ReactDOM.unstable_batchedUpdates)
• Uncaught errors are isolated
• Runs continuously (to reduce frame skips)

 

API

import { raf } from '@react-spring/rafz'

// Schedule an update
raf(dt => {})

// Start an update loop
raf(dt => true)

// Cancel an update
raf.cancel(fn)

// Schedule a mutation
raf.write(() => {})

// Before any updates
raf.onStart(() => {})

// Before any mutations
raf.onFrame(() => {})

// After any mutations
raf.onFinish(() => {})

// Set a timeout that runs on nearest frame
raf.setTimeout(() => {}, 1000)

// Use a polyfill
raf.use(require('@essentials/raf').raf)

// Get the current time
raf.now() // => number

// Set how you want to control raf firing
raf.frameLoop = 'demand' | 'always'

 

Notes

• Functions can only be scheduled once per queue per frame.
• Thus, trying to schedule a function twice is a no-op.
• The update phase is for updating JS state (eg: advancing an animation).
• The write phase is for updating native state (eg: mutating the DOM).
• Reading is allowed any time before the write phase.
• Writing is allowed any time after the onFrame phase.
• Timeout handlers run first on each frame.
• Any handler (except timeouts) can return true to run again next frame.
• The raf.cancel function only works with raf handlers.
• Use raf.sync to disable scheduling in its callback.
• Override raf.batchedUpdates to avoid excessive re-rendering in React.

 

raf.throttle

Wrap a function to limit its execution to once per frame. If called more than once in a single frame, the last arguments are used.

let log = raf.throttle(console.log)

log(1)
log(2) // nothing logged yet

raf.onStart(() => {
  // "2" is logged by now
})

// Cancel a pending call.
log.cancel()

// Access the wrapped function.
log.handler

Prior art

• fastdom
• framesync