DOCSEARCHbyAlgolia
Submit Docs

Reactive (@shined/reactive)

website·Indexed 29 days ago

https://sheinsight.github.io/react-use

A state management library providing reactive stores with support for Vanilla JavaScript and React. It features a system of enhancers such as withSnapshot, withDerived, and withSubscribe, and includes integration with Redux DevTools. Key APIs include createVanilla, useReactive, produce, and setGlobalNotifyInSync.

Tokens
132.6K
Snippets
912
Records
1.1K
Agent score
72%

What's inside Reactive

  1. Overview of @shined/react-use features and optimizations

    @shined/react-use is a zero-dependency, SSR-friendly React Hooks library written in TypeScript. Key technical features include:

    • Tree-shakable: Delivered via ESM to ensure only used hooks are bundled.
    • Safe State: Implements a safe state strategy for stateful hooks to reduce bugs.
    • Stable Functions: Exported functions are stabilized by default.
    • Closure Protection: Uses a 'latest state' internal mechanism to avoid expired closure issues.
    • Render Control: Provides a Pausable instance to optionally control hook behavior and reduce unnecessary re-renders.

  2. Overview of react-use Hook categories

    The react-use library provides a comprehensive collection of React Hooks categorized by type to handle various development scenarios:

    • Lifecycle: Hooks related to React lifecycle events (e.g., useMount, useUnmount, useUpdateEffect).
    • State: Derived state management (e.g., useSafeState, useRafState, useSetState).
    • Element: DOM element interactions (e.g., useElementSize, useFocus, useScroll, useDropZone).
    • Browser: Wrappers for Browser APIs with support detection (e.g., useClipboard, useFullscreen, useBattery, useBluetooth, useEyeDropper, useResizeObserver).
    • Sensors: Hardware and user input sensors (e.g., useKeyPress, useGeolocation, useFps, useMouse, useUserIdle).
    • Animation: Timer and animation-related utilities (e.g., useIntervalFn, useTimeoutFn, useRafFn).
    • Network: Network status and connectivity (e.g., useOnline, useNetwork).
    • Utilities: General purpose tools (e.g., useAsyncFn, useCountdown, useDateFormat, useDebouncedFn, useRetryFn, useTimeAgo, useEventBus).
    • ProUtilities: Complex business logic scenarios (e.g., useQuery, useDynamicList, usePagination, useVirtualList).

  3. Overview of @shined/reactive state management

    @shined/reactive is a TypeScript-based state management library for JavaScript applications. It is framework-agnostic (working with React and Vanilla JS) and utilizes the Proxy API for performance. Key features include a simple create method for state initialization, compatibility with Redux DevTools, and a read-write separation strategy to ensure safe state consumption.

  4. Overview of @shined/react-use

    @shined/react-use is a comprehensive, highly optimized React Hooks library designed to improve development efficiency and promote a 'Hooks-first' programming paradigm. It is developed in TypeScript, is SSR (Server-Side Rendering) friendly, and has zero dependencies. Key features include support for Tree Shaking via ESM, a wide array of semantic hooks, and rigorous testing using Vitest.

  5. Overview of @shined/reactive state management

    @shined/reactive is a lightweight, TypeScript-based state management library designed for both React and Vanilla JavaScript applications. It leverages the Proxy API for performance and provides out-of-the-box compatibility with Redux DevTools. The library focuses on a simple API where the create method covers the majority of use cases.

  6. Overview of react-use library capabilities

    react-use is a library of high-quality React Hooks designed to accelerate application development by providing pre-built solutions for common tasks. It covers a wide range of categories including basic effect handling, state management, UI state, browser API wrappers, sensor integration, and complex business logic like virtual lists and pagination.

  7. Overview of Latest State management in @shined/react-use

    @shined/react-use internally manages the latest state within its hooks to prevent bugs caused by closures capturing stale props or state. This is especially critical for asynchronous operations (e.g., network requests, timeouts) where the state may change between the time the operation is initiated and when it completes.

  8. Manage asynchronous loading states with useLoadingFn

    useLoadingFn is a React Hook designed to handle loading states for asynchronous operations. It is an alias of the useAsyncFn hook. It allows developers to easily track whether an async function is currently executing, providing a boolean loading state and the resulting value of the operation.

  9. Manage global loading state with createSingleLoading

    The createSingleLoading utility provides a way to manage a single (or global) loading state that can be accessed and controlled via multiple React hooks or a shared instance. It is powered by @shined/reactive and requires that package to be installed. Note that as of v1.4.0, this utility is deprecated and has been migrated to @shined/reactive.
    import { create } from '@shined/reactive';
const pageLoading = createSingleLoading({ create });
const { set, get, bind, useLoading, useAsyncFn } = pageLoading;

  10. Manage form state with useForm

    The useForm hook manages form state and supports two primary modes of operation:

    1. Uncontrolled Mode: When used with native <form /> elements, it minimizes re-renders for better performance while still allowing programmatic updates to the form state.
    2. Controlled Mode: When used with third-party component libraries (e.g., shineout), it provides standard controlled state management.

    It is suitable for general form state management, validation/submission workflows, and dynamic forms where items are added or removed.

  11. Track scroll state with useScroll

    The useScroll hook tracks the scroll state of a target element. It provides real-time data on the scroll position (x, y), whether the element is currently scrolling, the direction of the scroll, and whether the scroll has reached the edges of the container. The returned object is a Pausable instance, meaning the tracking can be paused and resumed.
    const scroll = useScroll(elementTarget, options);