Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt

Use this file to discover all available pages before exploring further.

useState<T>(initialValue: T): [T, (value: T) => void];
​
initialValue
T
required
The initial state value. Can be any type: number, string, boolean, object, or array.

​
Returns

A two-element array:
  • [0] — The current state value.
  • [1] — A setter function that updates the state and triggers a re-render.

​
Usage

​
Counter

const body = () => {
    const [count, setCount] = useState(0)

    return VStack({ spacing: 12 }, [
        Text(String(count)).font("largeTitle"),
        Button("Increment", () => setCount(count + 1))
    ])
}

​
Toggle visibility

const body = () => {
    const [isVisible, setIsVisible] = useState(true)

    return VStack({ spacing: 16 }, [
        Button(isVisible ? "Hide" : "Show", () => {
            setIsVisible(!isVisible)
        }),
        isVisible ? Text("Now you see me").font("body") : Empty()
    ])
}

​
Object state

const body = () => {
    const [form, setForm] = useState({ name: "", email: "" })

    return VStack({ spacing: 12 }, [
        TextField("Name", form.name, (value) => {
            setForm({ ...form, name: value })
        }),
        TextField("Email", form.email, (value) => {
            setForm({ ...form, email: value })
        }),
        Text("Hello, " + form.name)
    ])
}

​
Notes

  • Each component instance maintains its own independent state. Two instances of the same component do not share useState values.
  • The initialValue is only used on the first render. Subsequent re-renders return the current state.
  • Calling the setter with the same value may still trigger a re-render.
  • For state shared across multiple components, use useStore instead.
  • useState must be called inside a component body function, not at the top level.

​
See Also