Home > @cascadiacollections/fluentui-compat

fluentui-compat package

Functions

Function	Description
bundleIcon(FilledIcon, RegularIcon)	Creates an optimized bundled icon component that renders either a filled or regular icon based on the filled prop. The component is memoized for optimal render performance.
useAsync()	Hook to provide an Async instance that is automatically cleaned up on dismount.
useBoolean(initialState)	Hook to store a boolean value and generate callbacks for setting the value to true, false, or toggling it. This hook is optimized for performance using idiomatic React patterns: - The identity of the callbacks will always stay the same across renders - Uses useMemo with empty dependencies for stable callback object - Avoids unnecessary function closures and object recreations - Provides stable referential identity for the callbacks object
useConst(initialValue)	Hook to initialize and return a constant value with stable identity. Unlike React.useMemo, this hook guarantees: - The initializer function is called exactly once - The returned value identity never changes - No re-computation on dependency changes This is equivalent to setting a private member in a class constructor.
useForceUpdate()	Hook to force update a function component by triggering a re-render. **⚠️ Performance Warning**: This hook will intentionally cause re-renders and should be used sparingly with clear intent. Overuse may introduce performance issues and long-running tasks. Consider using React's built-in state management patterns (useState, useReducer) or memoization strategies (useMemo, useCallback) before resorting to force updates. **🔧 Development Tools**: In development builds, this hook provides enhanced debugging features: - **Performance monitoring**: Tracks call frequency and warns about excessive usage - **Rapid call detection**: Alerts when multiple calls occur within a single frame (16ms) - **DevTools integration**: Displays call count in React DevTools for debugging - **Profiler marks**: Creates performance markers for React Profiler analysis - **Cleanup warnings**: Detects components with short lifetimes but many force updates This implementation uses useReducer for optimal performance: - **Memory efficient**: No additional closures or function allocations - **Stable reference**: The returned function identity never changes - **Minimal overhead**: Uses React's optimized reducer dispatch mechanism - **No dependencies**: Eliminates the need for additional custom hooks
useSetTimeout()	Hook to provide performance optimized timeout management with automatic cleanup. This hook provides a wrapper around setTimeout and clearTimeout that: - Automatically cleans up all active timeouts when the component unmounts - Uses Set for O(1) add/remove operations instead of Record for better performance - Auto-removes timeouts from tracking when they execute naturally - Returns a memoized object to prevent unnecessary re-renders

Interfaces

Interface	Description
BundledIconProps
IUseBooleanCallbacks	Updater callbacks returned by useBoolean.

Type Aliases

Type Alias	Description
TimeoutId	The timeout ID type that works across different environments
UseSetTimeoutReturnType