Jetpack Compose Academy · Lección

remember y mutableStateOf

Almacene un estado que sobreviva a la recomposición.

remember y mutableStateOf es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 1 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.

What Is State?

In Compose, state is any value that can change over time and that your UI cares about, like a counter or a typed name. 🙂

Plain Variables Don't Work

A normal var inside a Composable changes its value, but Compose never notices, so the screen stays exactly the same.

var count = 0
Button(onClick = { count++ }) {
    Text("Count: " + count)
}

Meet mutableStateOf

Wrapping a value in mutableStateOf creates an observable holder. When its value changes, Compose knows it must redraw.

val count = mutableStateOf(0)
count.value = count.value + 1

State Reads Are Tracked

Any Composable that reads a state's value gets subscribed to it automatically. Change the value and only those readers update.

The Recomposition Trap

Compose re-runs your function on every redraw. A fresh mutableStateOf each time would reset to zero and lose your work.

remember to the Rescue

remember stores a value across recompositions. Compose computes it once, then hands back the same instance on every redraw.

val count = remember { mutableStateOf(0) }

The Classic Combo

You almost always pair them: remember keeps the holder alive, while mutableStateOf makes changes observable. Together they hold real UI state.

Cleaner with by

Use the by delegate so you read and write the value directly, skipping the noisy .value access every single time.

var count by remember { mutableStateOf(0) }
count++

Putting It Together

Read count in your Text and change it in onClick. The button taps update the number, and Compose repaints just that Text.

var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
    Text("Tapped " + count)
}

State Holds Any Type

State is not just numbers. You can hold a String, a Boolean, or a whole data class, and Compose still tracks every change.

var name by remember { mutableStateOf("") }

Keep State Local for Now

For small widgets, holding state right inside the Composable is fine. Later you will lift it up, but local state is the perfect starting point.

Quick Check

Why do we wrap mutableStateOf in remember?

Recap

You learned that remember plus mutableStateOf gives you state that survives recompositions and updates the UI automatically. Nice start! 🎉

Preguntas frecuentes

¿La lección «remember y mutableStateOf» es gratis?

Sí — el texto completo de «remember y mutableStateOf» 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 «remember y mutableStateOf»?

Almacene un estado que sobreviva a la recomposición. 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 1 de 4.

¿Cuánto tiempo toma la lección «remember y mutableStateOf»?

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

← Volver a Jetpack Compose Academy