useAppState<T>(name: string, defaultValue: T): [T, (value: T) => void];
A unique key identifying this state value. All components using the same key share the same state.
The initial value used when no state exists for the given key.
Returns
A two-element array:
[0] — The current state value for the given key.[1] — A setter function that updates the value and re-renders all components reading this key.
Usage
Shared theme toggle
const body = () => {
const [theme, setTheme] = useAppState("theme", "light")
return VStack({ spacing: 12 }, [
Text("Theme: " + theme).font("headline"),
Button("Toggle Theme", () => {
setTheme(theme === "light" ? "dark" : "light")
})
])
}
Shared counter across components
// Component A
const body = () => {
const [count, setCount] = useAppState("globalCount", 0)
return Button("Count: " + String(count), () => {
setCount(count + 1)
})
}
// Component B reads the same state
const body = () => {
const [count] = useAppState("globalCount", 0)
return Text("Total: " + String(count)).font("title2")
}
Notes
useAppState is the simpler predecessor to useStore. Prefer useStore for new components, especially when managing multiple related values.- State is keyed globally by the
name string. All components using the same key share and react to the same value.
useAppState must be called inside a component body function, not at the top level.
See Also
- useStore — structured global state with auto-generated setters
- useState — component-local state
