mgsmu-react - Minimal Global State Management Utility

npm: https://www.npmjs.com/package/mgsmu-react

• mgsmu-react is a lightweight global state management utility for React.
• It provides a simple publish-subscribe (pub-sub) mechanism to manage global state without external libraries like Redux or Zustand.
• Components can subscribe to specific keys and automatically re-render when those keys change.

install

npm install --save mgsmu-react

Use as a local hook instead (no npm dependency)

If you'd rather not add this as an external dependency, copy src/UseStore.tsx straight into your app (e.g. src/hooks/useStore.tsx) and import from there:

import { useStateStore, useClickSetter } from '../hooks/useStore';

• Everything below works identically — it's the same source, just vendored into your own codebase instead of pulled from npm.
• No build step or extra tooling required; it's a single self-contained .tsx file with only react as a peer.
• Useful if you want to review/audit the code, avoid an external dependency, or tweak the store for app-specific needs.

Import in any component

import { useStateStore, useClickSetter } from 'mgsmu-react';

• useStateStore() – React hook to access the global state and subscribe to changes.
• useClickSetter() – React hook for write-only updates (does not subscribe or re-render on changes).

Invoke state

const key = "data";
const [data, setData, removeData] = useStateStore(key);

• Parameter names are flexible (data, setData and removeData are just examples).
• keys can be used as you like. You can create as many keys as you like for different scenarios

Set data and key

const data = { specifics: "data", state: true, what: "next" };
setData(data)

// Functional Update 1.0.5
setData(prev => ({ ...prev, added: "new" }));

• Key: any string can be used ("data", "users", "messages", etc.)
• Data: any object or array can be stored under that key.
• Allows management of multiple independent keys in your global state

Listen and catch changes

useEffect(() => {
    if (!data) return;
    console.log(data); //use Data
  },[data])

logs: {
    "specifics": "data",
    "state": true,
    "what": "next",
    "updatedAt": 1757423800721
}

• useEffect triggers whenever the specified key (data in this example) changes.
• Supports multiple keys — you can set up multiple useEffect hooks to listen to different keys individually.
• Ensures components only re-render when the relevant slice of state updates.

Remove keys

removeData("data");

• Deletes a key from the global state.
• Make sure component is clean if rendered again
• Note: Triggers re-render for components subscribed to that key.

Write-only updates with useClickSetter

const setData = useClickSetter("data");

<button onClick={() => setData({ specifics: "data", state: true })}>
  Update
</button>

• Returns a single memoized setter function — no current value, no re-subscription.
• The component calling useClickSetter does not re-render when the key changes.
• Useful for components that only trigger updates (e.g. buttons, forms) but don't need to read the key's value themselves.
• Same underlying store as useStateStore — updates are still broadcast to any component subscribed via useStateStore on that key.

Notes

• Every state update includes an updatedAt timestamp.
• The store works with any object structure, making it flexible for various use cases.
• Lightweight and minimal — no context providers or extra boilerplate required.
• Ideal for managing small to medium app state where a full state library would be overkill.

Changelog

All notable changes to this project will be documented in this file.

[1.0.7] - 2026-08-18

Added

• LICENSE.md (MIT) included in the package.
• repository, homepage, and bugs fields in package.json, linking to the GitHub repo.

[1.0.6] - 2026-08-18

Fixed

• setStateStore no longer silently drops primitive/array values (numbers, strings, arrays, null) returned from a functional update — previously they were spread into an object and lost.
• useStateStore's setter is now memoized with useCallback, so its reference stays stable across renders (matches useClickSetter).
• Setter type signature now reflects functional-update support ((v: any | ((prev: any) => any)) => void).

Documented

• Added usage section and hook overview entry for useClickSetter (previously undocumented outside the changelog).

[1.0.5] - 2025-11-11

Fixed

• Setter now supports functional update (like React’s setState)

[1.0.4] - 2025-10-22

Added

• Added UseClickSetter
  • Only Clicking purpose

[1.0.3] - 2025-10-22

Fixed

• Optimized listener notifications:
  • Only listeners subscribed to a changed or removed key are notified.
  • Previously, all listeners were notified on every state change.