Elevar el estado con value y onValueChange
Pase el estado hacia abajo y los eventos hacia arriba.
Elevar el estado con value y onValueChange es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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. 🚀
Preguntas frecuentes
¿La lección «Elevar el estado con value y onValueChange» es gratis?
Sí — el texto completo de «Elevar el estado con value y onValueChange» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Elevar el estado con value y onValueChange»?
Pase el estado hacia abajo y los eventos hacia arriba. Practicas Jetpack Compose Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Jetpack Compose Academy?
No se requiere experiencia previa. Jetpack Compose Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Elevar el estado con value y onValueChange»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Jetpack Compose Academy?
Sí. Cada lección de Jetpack Compose Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Composables con y sin estado
- Elevar el estado con value y onValueChange
- Fuente única de la verdad
- Slots de estado de Compose y lambdas de contenido