Jetpack Compose is cool. It allows you to build UI in code, using Kotlin.

Recently, I ran into a bug with Recomposition after getting the data back from the ViewModel, and it was impacting the performance. So I decide to deep dive into the lifecycle of Composable and understand how lifecycle and recomposition work for Jetpack Compose.

This is how Composition and Recomposition work on Android. When Android draws Jetpack Compose UI on your Android device, or in a more technical term, running composables, it goes through stages of Composition and Recomposition. Composition is a tree structure of the composibles that describe your UI. It is the skeleton of what your UI looks like. In the initial run, it will keep track of the intial tree. When the state of your app (the content of the UI, or the UI itself changes), Jetpack Compose does a Recomposition, and then update the Composition to reflect the change.