Skip to main content
function useAppState<T>(name: string, defaultValue: T): [T, (value: T) => void]

​
Parameters

​
name
string
A unique identifier for the app state value. This key is used to persist and share the state across components.
​
defaultValue
T
The default value to use if no saved state exists for the given name. This also determines the type T for the state.

​
Returns

Returns a tuple similar to useState:
  • [0] - The current state value of type T
  • [1] - A setter function (value: T) => void to update the state

​
Support

​
Usage

​
Basic app state

const [userName, setUserName] = useAppState("userName", "")

return VStack([
  Text(`Hello, ${userName || "Guest"}`),
  TextField({ placeholder: "Enter your name", text: userName, setText: setUserName })
])

​
App settings

const [settings, setSettings] = useAppState("appSettings", {
  notifications: true,
  autoSave: true,
  theme: "blue"
})

return VStack([
  Toggle({
    label: "Notifications",
    isOn: settings.notifications,
    setIsOn: (value) => setSettings({ ...settings, notifications: value })
  }),
  Toggle({
    label: "Auto Save",
    isOn: settings.autoSave,
    setIsOn: (value) => setSettings({ ...settings, autoSave: value })
  })
])

​
Counter with persistence

const [count, setCount] = useAppState("counter", 0)

return VStack([
  Text(`Count: ${count}`),
  HStack([
    Button("-", () => setCount(count - 1)),
    Button("+", () => setCount(count + 1)),
    Button("Reset", () => setCount(0))
  ])
])

​
Notes

  • App state persists across components and component renders
  • Each unique name key maintains its own independent state
  • State is automatically serialized and deserialized
  • Use for user preferences, settings, form data, and other app-level data
  • Different from useState which resets on component unmount