Docs

State Consumers

Consumers are components that access or update existing global state. No Provider is required—the key is the only bridge.

#Hook API for Consumers

Pass the key to useSuperState to join the real-time synchronization. If the key hasn't been initialized by a createSuperState owner, it will throw an error to help catch missing initialization early.

ts
AvatarDisplay.tsx
import { useSuperState } from "react-use-superstate"
export function AvatarDisplay() {
// Join the 'user' state via its key
const [user] = useSuperState('user')
if (!user) return <img src="placeholder.jpg" />
return <img src={user.profilePic} />
}

#Granular Sync

By default, consumers only re-render when the specific key they are watching changes. If you're watching "user.age", updates to "user.name" will not trigger a re-render.

ts
AgeBadge.tsx
import { useSuperState } from "react-use-superstate"
export function AgeBadge() {
// Ultra-efficient: only watches 'user.age'
const [age] = useSuperState('user.age')
return <span className="badge">{age}</span>
}
Global Scope
Keys are global to the entire React tree. Ensure your keys are unique or namespaced (e.g. 'feat:auth:user') to avoid collisions across different features.
NextLocal vs Global