FluentUI Compat

Home > @cascadiacollections/fluentui-compat > Async

Async class

Ultra-optimized Async utility class designed for high-performance React applications.

This class provides memory-efficient management of asynchronous operations with automatic cleanup on disposal. It's particularly useful for preventing memory leaks in React components where async operations might continue after component unmounting.

Key performance features: - ID pooling to reduce memory allocations - Batch timer operations to minimize system calls - Window reference caching to reduce DOM queries - Optimized state management in throttle/debounce functions - Development-time performance monitoring

Signature:

export declare class Async 

Example

const asyncManager = new Async(this, (error) => console.error(error));

// All of these will be automatically cleaned up on dispose
asyncManager.setTimeout(() => console.log('Hello'), 1000);
asyncManager.setInterval(() => console.log('Tick'), 500);

const throttledFn = asyncManager.throttle(expensiveFunction, 100);
const debouncedFn = asyncManager.debounce(searchFunction, 300);

// Clean up all async operations
asyncManager.dispose();

Constructors

Constructor

Modifiers

Description

(constructor)(parent, onError)

Creates a new Async instance.

Methods

Method

Modifiers

Description

cancelAnimationFrame(frameId, targetElement)

Cancels an animation frame request created by requestAnimationFrame.

clearImmediate(timerId, targetElement)

Clears an immediate execution created by setImmediate.

clearInterval(intervalId)

Clears an interval created by this instance's setInterval method.

clearTimeout(timerId)

Clears a timeout created by this instance's setTimeout method.

debounce(func, wait, options)

Creates an ultra-optimized debounce function with advanced state management.

Debouncing delays function execution until after the specified wait time has elapsed since the last invocation. This is ideal for expensive operations triggered by frequent events like typing or API calls.

dispose()

Disposes of the Async instance and cleans up all associated resources.

This method should be called when the instance is no longer needed to prevent memory leaks. It will cancel all pending timers, intervals, and animation frames.

getPerformanceMetrics()

Retrieves performance metrics for this Async instance. Only available in development builds to avoid production overhead.

requestAnimationFrame(callback, targetElement)

Optimized requestAnimationFrame implementation with intelligent fallback handling.

Provides smooth animation frame scheduling with automatic cleanup and cross-browser compatibility. Falls back to setTimeout with 60fps timing when RAF is unavailable.

setImmediate(callback, targetElement)

Optimized setImmediate implementation that uses setTimeout(0) with window caching.

Provides cross-browser compatibility for immediate execution scheduling.

setInterval(callback, duration)

High-performance setInterval implementation with enhanced tracking and cleanup.

setTimeout(callback, duration)

High-performance setTimeout implementation with automatic cleanup and memory pooling.

Provides the same API as the native setTimeout but with enhanced memory management and automatic cleanup when the Async instance is disposed.

throttle(func, wait, options)

Creates an ultra-optimized throttle function with minimal memory allocations.

Throttling limits function execution to at most once per specified time period. This is useful for performance-critical events like scroll or resize handlers.

  • Edit this page
In this article
Back to top FluentUI React complimentary components and utilities focused on render performance