Docs

State Owners

In SuperState, state is not created in a vacuum. Every piece of global state is "owned" by the component that initializes it.

#The Owner Pattern

The component that calls createSuperState with a specific key becomes the owner. If multiple components try to own the same key, they will all stay in sync, but typically you define the source of truth in a high-level layout or a specific feature container.

ts
SettingsSection.tsx
import { createSuperState } from "react-use-superstate"
export function SettingsSection() {
// This component 'owns' the settings key
const [settings, setSettings] = createSuperState('settings', {
theme: 'dark',
notifications: true
})
return (
<div>
<h3>Set Theme</h3>
<button onClick={() => setSettings(s => ({ ...s, theme: 'light' }))}>
Switch to Light
</button>
</div>
)
}

#Lifecycle & Persistence

Even if the owner component unmounts, the global state remains in the external store. However, the *initial value* provided by the owner acts as the default if the state is ever reset.

Decoupled Logic
Ownership is about initialization. Once initialized, any component can update the state without the owner needing to be present in the render tree.
NextState Consumers