Controlled and Uncontrolled State
Headless Controlled and Uncontrolled State; covers Radix useControllableState, React Aria controlled state.
| Package | @vizejs/ui/controllable-state |
| Maturity | stable |
| Own the source | vize lib pull controllable-state |
| Requires | — |
| Aliases | controllable state, controlled state, uncontrolled state |
| Covers | Radix useControllableState, React Aria controlled state |
API
useControllableState
Create one state contract for controlled props and internal state. The last controlled value is retained if the source becomes uncontrolled, preventing an abrupt jump back to the initial default.
function useControllableState<Value>( options: ControllableStateOptions<Value>, ): ControllableState<Value>
Behavior
Normative state x input -> outcome table for @vizejs/ui/controllable-state.
Every row is proven by
src/families/foundations/controllable-state/controllable-state.test.ts;
compile-only assertions live in
src/families/foundations/controllable-state/controllable-state.types.test-d.ts.
| # | State | Input | Outcome | Proven by |
|---|---|---|---|---|
| CS1 | uncontrolled | set updater | internal value updates and onChange receives next and previous values |
updates and resets uncontrolled state |
| CS2 | uncontrolled | reset | current default value is requested and change ordering remains observable | updates and resets uncontrolled state |
| CS3 | controlled | set | source value is not mutated; the change request is reported to the consumer | requests controlled updates without mutating... |
| CS4 | controlled | source update | rendered value follows the external source | requests controlled updates without mutating... |
| CS5 | control released | source becomes undefined | the last controlled value is retained as internal state | retains the last value when control is released |
| CS6 | custom equality | equivalent update | redundant writes are rejected without replacing the stored value | supports domain-specific equality... |
| CS7 | public type API | invalid updater/defaults | compile-only assertions preserve the value type through reads, sets, and reset | src/families/foundations/controllable-state/controllable-state.types.test-d.ts |
The primitive performs no DOM work and emits no CSS. Concrete controls remain responsible for native form integration, accessibility state, and reset events.