Skip to main content
.onChange<V>(value: V, action: (values: [V, V]) => void): Component
​
value
V
required
The value to observe for changes.
​
action
(values: [V, V]) => void
required
A callback that receives a tuple of [newValue, oldValue] when the watched value changes.

​
Support

​
Usage

​
Watching a state value

const body = () => {
    const [name, setName] = useState("")

    return TextField({ text: name, setText: setName })
        .onChange(name, ([newVal, oldVal]) => {
            console.log("Changed from " + oldVal + " to " + newVal)
        })
}

​
Reacting to selection changes

const body = () => {
    const [selected, setSelected] = useState("home")

    return VStack([
        Picker("Tab", selected, setSelected, [
            Text("Home").tag("home"),
            Text("Profile").tag("profile")
        ])
    ]).onChange(selected, ([newVal]) => {
        console.log("Selected: " + newVal)
    })
}

​
Triggering side effects

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

    return VStack([
        Text(String(count)),
        Button("Increment", () => setCount(count + 1))
    ]).onChange(count, ([newVal]) => {
        if (newVal >= 10) {
            console.log("Reached limit")
        }
    })
}

​
Notes

  • The action only fires when the value actually changes, not on initial render. Use .onAppear() for initial setup.
  • The callback receives both the new and old values as a tuple [newValue, oldValue], allowing comparison logic.

​
See Also