Zero-boilerplate, no-provider global state for React 18/19

Global state that
avoids provider hell.

Stop wrestling with <Provider> or complex boilerplate. SuperState is built on useSyncExternalStore for fine-grained reactivity and zero-setup global state.

Get Started
npminstall react-use-superstate

Zero Boilerplate

No store files, no <Provider> at the root, no complex configuration. Just a string key to share state.

Fine-grained Reactivity

Built on useSyncExternalStore. Only components watching a specific key (or sub-key) re-render.

TypeScript First

Full type safety and intelligent inference out of the box. No generics required for basic usage.

Production Ready

Minimal footprint, persistent global state, and robust batching for high-performance applications.

Getting Started

SuperState uses an **Owner / Consumer** pattern. If you know how to use useState, you already know SuperState. Promote any local state to a global one just by adding a string key.

Standard Hook Usage

ts
App.tsx
import { createSuperState, useSuperState } from "react-use-superstate"
// 1. Define and own the state (The Owner)
function Navbar() {
const [user] = createSuperState('user', { name: 'Ahsan', age: 25 })
return <h3>Welcome, {user.name}</h3>
}
// 2. Consume from anywhere else (The Consumer)
function Profile() {
// Only subscribes to what it needs
const [age, setAge] = useSuperState('user.age')
return <button onClick={() => setAge(a => a + 1)}>Age: {age}</button>
}

Global vs Local

Remove the key to make it local. Add it back to share it. Works exactly like React's useState.

ts
FlexibleState.tsx
// Global: Shared across 'theme' key
const [theme, setTheme] = createSuperState('theme', 'light')
// Local: Works like vanilla React
const [count, setCount] = createLocalState(0)

Dot-Notation

Subscribe directly to nested object properties. Your component will only re-render if that specific property changes.

ts
UserAddress.tsx
// Subscribes only to 'address.city'
const [city, setCity] = useSuperState('user.address.city')

Store Utilities

Access and manipulate your global state outside of React components. Perfect for API headers, middleware, or utility functions.

ts
ExternalStore.ts
import { getState, setState, batchUpdate, resetState } from "react-use-superstate"
// Synchronous access
const user = getState('user')
// Functional updates
setState('user', (prev) => ({ ...prev, name: 'Talal' }))
// Atomic batching (prevents multiple re-renders)
batchUpdate(() => {
setState('count', 1)
setState('theme', 'dark')
})
// Reset to initial owner value
resetState('user')

Build faster, cleaner apps.

SuperState is developed by Sheikh Ahsan Talal and the open-source community. Join developers using global state that feels like a native React hook.

Read Documentation Star on GitHub