Global Store

🧭 When to Use Global State?

In React applications, properly placing state is essential for performance and maintainability.

Global state is a great choice when:

Two sibling components need to respond to the same state change.
A deeply nested component needs data from high up in the tree.
Multiple parts of your app should react to a shared change.

Once you’ve identified that need, useS makes managing global state easy and scalable.

🗂️ Creating a Centralized Store

To stay organized, it’s best practice to centralize your global state config objects ({ value, key }) in a store.ts file:

store.ts


export type StoreType = {
  globalCounter: {
    value: number;
    key: string;
  };
};
 
export const store: StoreType = {
  globalCounter: {
    value: 0,
    key: "global-counter",
  },
} as const;

Benefits:

Clear naming and structure
Avoid reusing or mistyping keys
Easy reuse across components

⚙️ Using the Global Store in Components

Just import the store and use the state:

Component.tsx


import { useS } from "use-s-react";
import { store } from "./store";
 
export default function Component() {
  const [state, setState] = useS(store.globalCounter);
 
  return <> ... </>;
}

Any component using useS(store.globalCounter) will now share the same state.

💡 Tip: You Can Still Use the Value Locally

If you’re unsure whether a state should be global, you can still use the centralized value as local state:

Component.tsx


import { useS } from "use-s-react";
import { store } from "./store";
 
export default function Component() {
  const [state, setState] = useS(store.globalCounter.value);
 
  return <> ... </>;
}

This pattern keeps your state organized and allows flexibility as your app evolves.

🧾 Example `store.ts` with All Supported Types

This is a complete example of a fully typed store using StoreType and all the types useS supports: