state-management-utilities/dist/react/state-manager.js

State management utilities

import React from "react";
import { StateManager } from "../state-manager";
import { useDehydrate } from "./dehydrate";
export class ReactStateManager extends StateManager {
    _hooks = Object.freeze({
        useState: () => {
            const uID = React.useId();
            const dehydrated = useDehydrate();
            const hydratedValue = dehydrated?.data?.[this.uid]?.value;
            const [state, setInternalState] = React.useState(hydratedValue === undefined ? this.value : hydratedValue);
            React.useEffect(() => {
                this.register({
                    uid: uID,
                    callback: (newValue) => {
                        setInternalState(newValue);
                    },
                });
                return () => {
                    this.unregister({ uid: uID });
                };
            }, [uID]);
            const setState = React.useCallback((newState) => {
                this.value = newState;
            }, []);
            return [state, setState, uID];
        },
    });
    get hooks() {
        return this._hooks;
    }
}
export function manager(initialState, configs) {
    return new ReactStateManager(initialState, configs);
}