Statekit - v2.0.1
    Preparing search index...

    Function useStore

    • A hook used to access a store created with createStore and bind it to a component.

      Type Parameters

      • TState extends object
      • TActions extends object
      • TSelection = TState

      Parameters

      • store: Store<TState, TActions>

        The store created with createStore.

      • Optionalselect: (state: TState) => TSelection

        A function to select a subset of the state. Can prevent unnecessary re-renders.

      Returns BoundStore<TState, TActions, TSelection>

      An object containing the current state, actions, and set function.

      Basic usage:

      import { useStore } from "@fransek/statekit";
      import { store } from "./store";

      function Counter() {
        const {
          state: { count },
          actions: { increment, decrement, reset },
        } = useStore(store);

        return (
          <div>
            <div>{count}</div>
            <button onClick={decrement}>-</button>
            <button onClick={increment}>+</button>
            <button onClick={reset}>Reset</button>
          </div>
        );
      }

      With a select function:

      const {
        state: { count },
      } = useStore(globalStore, (state) => state.counter);

      If the select function is provided, an equality check is performed. This has some caveats:

      • For optimal performance, return a direct reference to the state. (e.g. state.count)
      • If you return an object literal, it should only contain direct references to the state. (e.g. { count: state.count })

    Settings

    Member Visibility