reactuse

The Reactuse skill is designed to optimize how AI coding assistants interact with the library. It provides:

• Hook-first decision model: Encourages using existing hooks before implementing custom logic.
• Invocation priority guidance: Categorizes hook usage into HIGH, MEDIUM, or LOW priority.
• Domain-based coverage: Organizes hooks into structured domains including async, browser, elements, lifecycle, state, utilities, sensors, time, user, debug, and helpers.
• Requirement mapping: Directly maps specific development requirements to concrete Reactuse APIs.

The @siberiacancode/reactuse library organizes its hooks and helpers into four categories based on their practical utility and frequency of use in production applications:

Necessary

Core primitives for everyday React tasks (e.g., useBoolean, useClickOutside, useMount, useEventListener).

High

Frequently used functions for production features, including debouncing, storage management, and URL parameters (e.g., useDebounceValue, useLocalStorage, useUrlSearchParams, cn).

Medium

Building blocks for specific recurring patterns like forms, pagination, intersection observers, and complex state management (e.g., useForm, useIntersectionObserver, useControllableState).

Low

Niche utilities for specialized browser APIs, edge cases, and specific hardware interactions (e.g., useBluetooth, useBattery, useSpeechRecognition, useWebWorker).

createContextHook is a utility designed for scenarios where a hook needs to be configured differently for different parts of your application.

Instead of calling a hook directly, you pass the hook function to createContextHook. This returns a Provider component. When you wrap a subtree with this Provider and pass arguments via the params prop, the hook is executed with those arguments. Any component within that subtree can then call the returned use hook to access the result of that specific hook execution.

The reactuse skill enhances an AI agent's ability to work with the library by providing:

• Hook-first decision model: Encourages checking for existing hooks before writing custom logic.
• Invocation priority guidance: Categorizes hook usage with priority levels (HIGH, MEDIUM, LOW).
• Domain-based organization: Categorizes hooks into specific domains for easier retrieval:
  • async
  • browser
  • elements
  • lifecycle
  • state
  • utilities
  • sensors
  • time
  • user
  • debug
  • helpers
• Requirement mapping: Directly maps user requirements to concrete Reactuse APIs.

ReactUse deliberately avoids memoizing hook methods by default. The library follows the principle that memoization is an optimization technique that should be applied consciously by the developer rather than automatically by the library.

Why ReactUse avoids automatic memoization:

• Prevents masking architectural issues: Automatic memoization can hide the root causes of unnecessary re-renders instead of fixing them.
• Avoids false security: It prevents developers from assuming performance is optimized when it might not be.
• Simplifies debugging: Memoized functions can behave unexpectedly when dependencies change; by not memoizing by default, the library ensures more predictable behavior.

Developers are encouraged to use React's built-in tools like useCallback and useMemo to manage performance manually when a real performance problem is identified.

ReactUse prioritizes simple, predictable utility hooks. By default, the library does not implement shared caches or cross-component optimizations.

Each hook instance typically maintains its own subscription (e.g., one listener per hook call). This design choice ensures:

• Easier debugging: One subscription per hook instance with no hidden shared state.
• Reduced complexity: Avoids imposing shared stores on applications that do not require them.

Optimization is treated as a conscious, application-level decision. If you identify a performance bottleneck caused by many components using the same hook with the same arguments, you should implement optimization within your own application layer.

The webcam component supports horizontal mirroring and audio muting. Both are enabled by default.

• mirrored: Flips the video and captured snapshots horizontally.
• muted: Mutes the underlying video element.

ReactUse prioritizes simple, predictable utility hooks over automatic performance optimizations. By default, hooks do not include shared caches or cross-component optimizations (like shared listeners).

This design choice ensures:

• Predictability: One subscription per hook instance with no hidden shared state.
• Simplicity: Hooks are easier to reason about and debug.
• Efficiency: Optimization is treated as a conscious, application-level decision rather than a library-imposed overhead that affects all users.

ReactUse deliberately avoids memoizing hook methods by default. The library follows a philosophy of conscious optimization rather than automatic memoization.

This approach is intended to:

• Prevent masking real architectural problems (like unnecessary re-renders).
• Avoid creating a false sense of performance security.
• Keep debugging predictable by ensuring functions behave as expected when dependencies change.

Developers are encouraged to use React's built-in tools like useCallback and useMemo to apply memoization only where a real performance problem exists.

You can install the useDeviceList hook using the @siberiacancode/reactuse library, via the useverse CLI, or by manually copying the source code into your project.

# Via Library
npm install @siberiacancode/reactuse

# Via CLI
npx useverse@latest add useDeviceList