FluentUI Compat

Home > @cascadiacollections/fluentui-compat > useAsync

useAsync() function

Hook to provide an Async instance that is automatically cleaned up on dismount.

This implementation is optimized for: - **Memory efficiency**: Uses useRef instead of useMemo to avoid closure overhead - **Render performance**: Minimizes effect overhead by consolidating development checks - **Immutability**: Ensures stable reference identity across all renders - **Type safety**: Leverages TypeScript strict mode and const assertions

Signature:

export declare function useAsync(): Async;

Returns:

Async

{Async} A stable Async instance that will be disposed on component unmount. The returned instance maintains referential identity across renders.

Example

import { useCallback } from 'react';

function MyComponent() {
  const async = useAsync();

  const handleClick = useCallback(() => {
    async.setTimeout(() => {
      console.log('Delayed action');
    }, 1000);
  }, [async]);

  return <button onClick={handleClick}>Start Timer</button>;
}
  • Edit this page
In this article
Back to top FluentUI React complimentary components and utilities focused on render performance