DOCSEARCHbyAlgolia
Submit Docs

Hookstate Documentation

website·Indexed 30 days ago

https://hookstate.js.org/docs/

A concise, pragmatic, and flexible state management library for React and Preact. Hookstate provides tools for managing local and global state, including support for nested and recursive state, asynchronous state loading, and a system of extensions such as @hookstate/snapshotable, @hookstate/localstored, and @hookstate/broadcasted. The documentation includes a technical API index for hookstate-core and migration guides from v3 to v4.

Tokens
10.3K
Snippets
60
Records
97
Agent score
65%

What's inside Hookstate

  1. Overview of Hookstate features and capabilities

    Hookstate is a state management library designed for high performance and ease of use. Key capabilities include:

    • Performance: Uses a unique method for tracking used/rendered and updated state segments, making it suitable for huge states and frequent updates.
    • State Management: Supports global states, local states, asynchronously loaded states, partial state updates, and deeply nested state updates.
    • TypeScript Support: Provides complete type inference for complex state structures and full IntelliSense support in VS Code.
    • Extensibility: Features a plugin system for adding functionality such as state snapshotting, rolling back, tracking modified fields, state validation, and local storage persistence.
    • Tooling: Includes a browser extension for tracing/setting state values, setting breakpoints on state changes, and identifying components using specific state segments.

  2. Overview of Hookstate features and capabilities

    Hookstate is a state management library designed for high performance and developer productivity. Key features include:

    • Performance: Uses a unique method for tracking used/rendered and updated state segments, making it suitable for huge states and frequent updates.
    • State Types: Supports global states, local states, asynchronously loaded states, partial state updates, and deeply nested state updates.
    • TypeScript: Provides complete type inference for complex state structures and full IntelliSense support.
    • Extensibility: Includes a plugin system for features like state snapshotting, rolling back, tracking modified fields, state validation, and local storage persistence.
    • Tooling: Offers a browser extension for tracing/setting state values, setting breakpoints on state changes, and identifying components linked to specific state segments.

  3. Overview of Hookstate features and capabilities

    Hookstate is a state management library designed for performance and flexibility. Key capabilities include:

    • Performance: Uses a unique method for tracking used/rendered and updated state segments, making it suitable for large states and high-frequency updates.
    • State Management: Supports global states, local states, asynchronously loaded states, and partial or deeply nested state updates.
    • TypeScript: Provides complete type inference for complex state structures and full IntelliSense support.
    • Extensibility: Features a plugin system for adding functionality such as state snapshotting, rolling back, tracking modified fields, state validation, and local storage persistence.
    • Tooling: Offers a browser extension for tracing/setting state values, setting breakpoints on state changes, and identifying components linked to specific state segments.

  4. Extend Hookstate functionality using extensions

    Extensions in Hookstate allow developers to augment the behavior of state objects. An extension can:

    • Provide state lifecycle callbacks and maintain its own internal state associated with the Hookstate State.
    • Add custom methods and properties to the State object returned by hookstate and useHookstate functions.
    • Operate consistently across both global and local states.
    • Be combined with other extensions using the extend function, allowing multiple extensions to be applied to a single state.
    • Leverage functionality provided by other installed extensions.

  5. Persist Hookstate state using LocalStorage

    The local storage extension enables persistence for both local and global Hookstate states. By default, data is stored in the browser's local storage, though a custom storage engine instance can be provided to store data elsewhere. To delete persisted data from the storage, set the state value to none.

  6. Understand Hookstate's performance architecture

    Hookstate achieves high performance by minimizing unnecessary component re-renders through two primary mechanisms:

    1. Proxy-based state value usage tracking: Hookstate tracks exactly which state values are accessed by which components, ensuring only the components that depend on a specific piece of changed state are re-rendered.
    2. Scoped State: This feature allows state to be partitioned, which enhances the efficiency of the Proxy-based tracking, especially when dealing with large state objects or high-frequency updates.

  7. Understand Hookstate core concepts

    Hookstate provides a unified API for managing local, global, and nested states. Key concepts include:

    • State Creation: States are created using the hookstate function (for global states) or the useHookstate hook (for local states).
    • Local vs Global: Global states are managed by the application lifecycle, while local states are created and destroyed by React during component mounting/unmounting.
    • Mutability: The initial state value is a mutable source, but should only be modified via Hookstate methods like State.set and State.merge.
    • Nested State: States allow drilling down into nested properties, which return new State objects with the same API.
    • Scoped State: State uplifting to parent components does not cause performance degradation due to the 'scoped state' feature.
    • Extensions: State objects can be enriched with plugins to add type-safe methods, hook into lifecycle events, or implement persistence and server synchronization.
    • React Integration: State objects can be used directly in dependency lists for useEffect, useMemo, and memo.

  8. Key changes and new features in Hookstate v4

    Hookstate v4 introduces several architectural changes and new capabilities:

    • Stable State Objects: useHookstate now returns a stable State object instance if the subscribed state hasn't changed, allowing it to be used safely in useEffect and useMemo dependency lists.
    • Type-Safe Extensions: Plugins are replaced by Extensions, which are type-safe and allow adding custom methods and properties to State objects.
    • Expanded Type Support: Can now hold any value type, including custom classes and standard classes like Date.
    • React 18 Integration: Full support for React 18, including Strict Mode and integration of asynchronous state with the Suspense feature.
    • Immutability: State.value and State.get are now immutable, enforced via TypeScript "deep readonly" typing.
    • Utility Functions: New isHookstate and isHookstateValue functions to verify if a variable is a State or a State value.
    • Environment Configuration: The configure function is available to set up the Hookstate module for specific environments (e.g., cross-framework state sharing).
    • Dropped Support: IE11 is no longer supported.

  9. Use Hookstate with Preact for improved performance

    Hookstate is verified to work with Preact out of the box, allowing developers to leverage Preact's performance improvements while using Hookstate for state management.

  10. Optimize performance using React native batching in event handlers

    When an event handler triggers multiple state update actions—whether they target the same nested part of the state or different parts—React natively batches these updates. This minimizes the number of re-renders required, improving application performance.

  11. Manually set state values via DevTools

    You can update the state at the root or a specific path by entering the action content into the 'Dispatch' form in the development tools and clicking the 'Dispatch' button. To determine the correct action format, inspect the action data of a state update triggered naturally within the application.

  12. Splice or prepend elements in an array state

    Use Array.prototype.splice within a state.set() callback to remove, replace, or prepend elements to an array.
    const state = useHookstate([3000, 4000])

// Prepend 1000 and 2000 to the start of the array
state.set(p => {
    p.splice(0, 0, 1000, 2000);
    return p;
})