useStateGlobal()

An useStateGlobal() represents single key-value state in State-jet. It enables storing global data across React components without using a store.

function useStateGlobal<T>(
  key: string,
  initialValue?: T,
  options?: { middleware?: Middleware<T>[], persist?: boolean, encrypt?: boolean }
) 

• key - A unique string used to identify the global state.

• initialValue - can holds any data types (string, array, object)

• options - An optional parameter which supports multiple options

  • middleware - which is used to add middleware support for state jet. Refer (Middlewares)

  • persist - if persist is true, the state data will be stored in localStorage. Refer (Persistence)

  • encrypt - supports encryption/decryption. Refer (Encryption)

  • frameSync - Useful for animation-heavy, high-frequency, or frame-sensitive state changes.

    It returns the following properties:

    • set() – Updates the state data.
    • useState() – Retrieves the latest state data.
    • undo() – Reverts the state to the previous value. Refer (Undo)
    • redo() – Restores the undone state. Refer (Redo)
    • clear() – Resets the state data. Refer (Clear)

warning

In state-jet@v1, the useStore() function was used to retrieve the latest state data. However, this functionality has now been replaced by useState(). Starting from v1, the useStore() function is used to create a new store.

✅ Example: Creating global state for counter App

Create a file at src/components/Counter.tsx:

src/components/Counter.tsx

import { useStateGlobal } from "state-jet";

const counter = useStateGlobal("counter", 0);

export default function Counter() {
  const count = counter.useState() as number;

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => counter.set(count - 1)}>Decrement</button>
      <button onClick={() => counter.set(count + 1)}>Increment</button>
    </div>
  );
}