Hoist State with value & onValueChange
Pass state down, events up.
Hoist State with value & onValueChange is a free Jetpack Compose Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Jetpack Compose Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
State Hoisting in One Line
State hoisting means moving state out of a Composable up to its caller. The component becomes stateless and the parent stays in charge.
The Core Pattern
Replace internal state with two parameters: a value to display and an onValueChange callback to report changes.
fun NameField(value: String, onValueChange: (String) -> Unit) {
TextField(value = value, onValueChange = onValueChange)
}State Down, Events Up
Data flows down through value; user actions flow up through onValueChange. This one-way loop is called unidirectional data flow. ↕️
Who Owns the State Now
The parent owns the state with remember and passes it in. The child never stores it, so two callers can drive the same component differently.
var name by remember { mutableStateOf("") }
NameField(value = name, onValueChange = { name = it })value: The Read Side
The value parameter is what the component shows right now. It is read-only to the child; the child never edits it directly.
onValueChange: The Write Side
When the user types, the child calls onValueChange(newText). The parent decides whether and how to update its state.
Why Not Edit In Place
A stateless child cannot just reassign value, it is only an input. Reporting the change upward keeps a single owner in control.
Controlled Components
This is a controlled component: the parent fully decides what shows. You can transform, ignore, or validate input before storing it.
NameField(value = name, onValueChange = { name = it.uppercase() })Reusing the Same Field
Because the field is hoisted, you can drop it into a login screen, a search bar, or a settings page, each with its own owning state.
Hoisting Beyond Text
The pattern fits any state: a checked Boolean with onCheckedChange, a selected item with onSelect. Same idea, different names.
fun ToggleRow(checked: Boolean, onCheckedChange: (Boolean) -> Unit) {
Switch(checked = checked, onCheckedChange = onCheckedChange)
}A Simple Rule
Hoist state to the lowest common parent that needs to read or change it, no higher. That keeps ownership clear and code clean.
Quick Check
In the hoisting pattern, what does the child do when the user types?
Recap
Hoisting swaps internal state for value plus onValueChange. State flows down, events flow up, and the parent stays in charge. 🚀
Frequently asked questions
Is the “Hoist State with value & onValueChange” lesson free?
Yes — the full text of “Hoist State with value & onValueChange” is free to read here on the web, and the Jetpack Compose Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Jetpack Compose Academy course, upgrade to CoddyKit PRO.
What will I learn in “Hoist State with value & onValueChange”?
Pass state down, events up. You practise Jetpack Compose Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Jetpack Compose Academy?
No prior experience is required. Jetpack Compose Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Hoist State with value & onValueChange” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Jetpack Compose Academy lesson?
Yes. Every Jetpack Compose Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Stateful vs Stateless Composables
- Hoist State with value & onValueChange
- Single Source of Truth
- Compose State Slots & Content Lambdas