Chapters
Chapters

Chapters

Hide chapters

Jetpack Compose by Tutorials

Second Edition · Android 13 · Kotlin 1.7 · Android Studio Dolphin

Before You Begin

Section 0: 6 chapters
Show chapters Hide chapters

Section I: Getting Started With Jetpack Compose

Section 1: 4 chapters
Show chapters Hide chapters

Section II: Composing User Interfaces

Section 2: 4 chapters
Show chapters Hide chapters

Section III: Building Complex Apps With Jetpack Compose

Section 3: 5 chapters
Show chapters Hide chapters

Section IV: UI Testing & Accessibility

Section 4: 2 chapters
Show chapters Hide chapters

Section V: Glances & Keeping Upto Date With Jetpack Compose

Section 5: 3 chapters
Show chapters Hide chapters

Section VI: Appendices

Section 6: 1 chapter
Show chapters Hide chapters

7. Managing State in Compose
Written by Denis Buketa

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Great job on completing the first two chapters of this section. Now you know the basic principles of composing a UI and making it beautiful.

In this chapter, you’ll change your focus from the UI of JetNotes to making it functional. To make any app functional, you need to know how to manage state, which is the topic of this chapter.

In this chapter, you’ll learn:

  • What state is.
  • What unidirectional data flow is.
  • How to think about state and events when creating stateless composables.
  • How to use ViewModel and LiveData from Android Architecture Components to manage state in Compose.
  • How to add functionality to the Notes screen.

Get ready to dive in by taking a deeper look at what state is and why it’s critical for your app.

Understanding State

Before you can understand the state management theory, you need to define what state is.

At its core, every app works with specific values that can change. For example, JetNotes manages notes, and users can make changes to the list of notes. They can:

  • Add new notes.
  • Delete current notes.
  • Change a note.
  • Complete a note.

State is any value that can change over time. Those values can include anything from an entry in a database to a property of a class. And as the state changes, you need to update the UI to reflect those changes.

UI Update Loop

When you think about how users interact with Android apps, you can say that it’s like having a conversation. Users communicate through events like clicking, dragging and speaking while the app responds by displaying the app’s state.

OI Orxuta Fuat
IU Afxoxe Tuap

Handling State With Android UI Toolkit

Before going further, remind yourself how the current Android UI Toolkit manages state.

Handling State With Unidirectional Data Flow

In the previous Spinner example, the data flow had multiple directions it could come from and multiple directions it could go to, depending on trigger events and UI updates it reflected. This means it’s hard to keep everything in sync and its hard to know where the change is coming from at all times.

Avavayiftoaloj Tibi Hdut
Atufikuqraefuy Mufa Ykav

Ibozuvilyeaguw Tami Sjac
Inuzivagduoxew Hejo Njay

Compose & ViewModel

As mentioned in the previous section, in unidirectional data flow, the UI observes the state. The Android framework offers some great Android Architecture Components that make it easy for you to follow that approach, including the ViewModel and LiveData.

Ocowitadqaebeb Leki Tmeq Yiyk Uhkpunihjame Leybekadkh
Obafuhusyuopis Koqu Wmik Yomj Eywvedazgimo Qukdowegzq

Creating the Notes Screen

So far, JetNotes has no screens. The only thing you can do with it at the moment is pull out the app drawer and inspect one note, which you use to track your progress. This is about to change. :]

Osphm Xehoq Hnjoudh
Ehsfz Juhem Vrzaacp

Implementing Unidirectional Data Flow

Now you have an entry point to Notes, you need to implement MainViewModel so it supports unidirectional data flow.

Ekayutuljeebuz Xucu Mtig — Zanoy Jyvuav
Ubugunoxkiuyob Fega Dwaw — Wojot Klvoec

Creating the App Bar

Before connecting the NotesScreen to the MainViewModel, you need to implement the UI components that make up the Notes screen.

ValOljKod Teykokakli — Btazoew
DacAydVop Caqyucomfi — Vsamiid

Stateless Composables

In MainViewModel, you exposed the list of NoteModels as a state, but your Note() still isn’t ready to render a specific NoteModel.

Ozedaqetkoajac Qoni Ysuc — Nedi
Egeseyowreevuh Raku Kvaw — Xeja

Rendering NoteModel’s State

To render the NoteModel in Note(), you need to replace your current, hard-coded values with the values from NoteModel.

Passing up Note Events

Remember, the first of the two events that a note can pass up to a parent is when a user clicks the note. You’ll handle that first, by updating the Row modifier in Note to allow that:

Jofim Hoxjupigze — Shadaaj
Mucan Furhayisji — Vbaseez

Unidirectional Data Flow With Stateless Composables

Hoisting the state out of Note() has advantages: It’s now easier to reason about the composable, reuse it in different situations and to test it. Plus, now you’ve decoupled Note() from how you store the state, if you modify or replace MainViewModel, you don’t have to change how you implement Note().

Acepawehxoojof Razo Cqip — Yosa
Amojakevdaopib Zewi Tveg — Kayi

Displaying Notes in the Notes Screen

Now that Note is stateless, you’re ready to display notes in the Notes screen.

Putat Jxdouv — Zaqf as nodoj
Sekog Bzwaox — Kadh iz cilaq

Extracting a Stateless Composable

Look at NotesScreen() code and you’ll see it has a dependency on the final class, MainViewModel, which directly changes notesNotInTrash’s state. That makes it a stateful composable.

WuyoxZubq Jifmayotsi — Lsuteaz
BofigZayx Biqdupojta — Xmicoix

Opikuquktaimef Daka Fneh — Detod Ygsoiz
Uyevilofkuunan Nulo Syun — Viliw Pdluiw

Key Points

  • State is any value that can change over time.
  • The UI update loop is made of three key concepts: event, update state and display state.
  • Unidirectional data flow is a design where state flows down and events flow up.
  • You can use the Android Architecture Components, ViewModel and LiveData, to implement unidirectional data flow in Compose.
  • A ViewModel lets you extract state from the UI and define events that the UI can call to update that state.
  • LiveData allows you to create observable state holders.
  • A stateless composable is a composable that cannot change any state itself.
  • State hoisting is a programming pattern where you move state to the caller of a composable by replacing internal state in that composable with a parameter and events.
6. Using Compose Modifiers
8. Applying Material Design to Compose
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now