Skip to main content
The useState function provides component-local state management similar to React’s useState hook. It returns a tuple containing the current state value and a setter function to update the state. 
const [state, setState] = useState(initialValue)

​
Parameters

  • initialValue - The initial value for the state. Can be any type.

​
Returns

Returns a tuple [currentValue, setterFunction] where:
  • currentValue - The current state value
  • setterFunction - A function to update the state that triggers component re-renders

​
Usage

​
Basic state management

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

  return (
    VStack([
      Button(`Count: ${count}`, () => setCount(count + 1))
    ])
  )
}

​
With complex state

const body = () => {
  const [user, setUser] = useState({ name: '', email: '' })

  return (
    VStack([
      TextField({
        text: user.name,
        setText: (newName) => setUser({ ...user, name: newName })
      }),
      TextField({
        text: user.email,
        setText: (newEmail) => setUser({ ...user, email: newEmail })
      })
    ])
  )
}

​
Notes

  • State updates trigger component re-renders automatically
  • Each component maintains its own state using hook indexing
  • The setter function can accept the new value directly
  • Initial value is only used on the first render