Remonter l’état avec value et onValueChange
Faites descendre l’état et remonter les événements.
Remonter l’état avec value et onValueChange est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Jetpack Compose Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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. 🚀
Questions Fréquemment Posées
La leçon « Remonter l’état avec value et onValueChange » est-elle gratuite ?
Oui — le texte complet de « Remonter l’état avec value et onValueChange » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Jetpack Compose Academy, passe à CoddyKit PRO. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Remonter l’état avec value et onValueChange » ?
Faites descendre l’état et remonter les événements. Tu pratiques Jetpack Compose Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Jetpack Compose Academy ?
Aucune expérience préalable n'est requise. Jetpack Compose Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Remonter l’état avec value et onValueChange » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Jetpack Compose Academy ?
Oui. Chaque leçon Jetpack Compose Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Composables avec ou sans état
- Remonter l’état avec value et onValueChange
- Source unique de vérité
- Emplacements d’état Compose et lambdas de contenu