Compose & Activity lifecycle in relation

Compose lifecycle

The Compose framework is a modern UI toolkit for building Android apps, and it has its own lifecycle that’s closely related to the Activity lifecycle.

In Compose, the lifecycle of a composable function is tied to the lifecycle of the UI elements it creates. Whenever a UI element needs to be updated, the composable function is recomposed, which means it’s executed again to generate a new version of the UI element.

The Compose lifecycle consists of the following phases:

1. Creating: This is the initial phase where the composable function is executed for the first time. During this phase, you can initialise any state or resources needed by the UI element.
2. Recomposition: This phase occurs whenever the UI element needs to be updated, such as when the user interacts with it or when data changes. The composable function is executed again to generate a new version of the UI element.
3. Destroying: This phase occurs when the UI element is no longer needed and is being removed from the screen. During this phase, you can release any resources that were allocated during the Creating phase.

The lifecycle of a composable is defined by the following events: entering the Composition, getting recomposed 0 or more times, and leaving the Composition.

A Composable’s’ lifecycle is simpler than the lifecycle of views, activities, and fragments. When a composable needs to manage or interact with external resources that do have a more complex lifecycle, you should use effects.

Activity lifecycle

We all know about activity lifecycle, not going in its details here. If you wish to brush up its lifecycle again, follow this link

Activity & Compose lifecycle

The Compose lifecycle is closely related to the Activity lifecycle because the lifecycle of a Compose UI element is tied to the lifecycle of the Activity that contains it. Whenever an Activity is created, paused, resumed, or destroyed, the Compose UI elements it contains also go through the corresponding lifecycle phases.

For example, if an Activity is paused, the Compose UI elements within it will also be paused and their state will be saved. Similarly, if an Activity is destroyed, the Compose UI elements within it will also be destroyed. This tight integration between the Compose and Activity lifecycles makes it easier to manage UI state and resources in your app. Let’s take a look at how the Activity lifecycle affects the Compose lifecycle with some sample code.

First, let’s create a simple Composable function that displays a text message:

@Composable
fun Message(text: String) {
    Text(text)
}

This Composable function takes a string parameter and displays it using a Text element.

Next, let’s create an Activity that uses this Composable function:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Message("Hello, world!")
        }
    }
}

In this Activity, we set the content view using the setContent method, which takes a Composable function as a parameter. In this case, we're using our Message Composable function to display the text "Hello, world!".

Now let’s take a look at how the Activity lifecycle affects the Compose lifecycle in this example:

1. Creating: When the Activity is created, the onCreate method is called, and the setContent method sets the content view to our Composable function Message("Hello, world!"). The Message Composable function is then executed, and the text "Hello, world!" is displayed.
2. Recomposition: If the user interacts with the UI or data changes, the Message Composable function is recomposed, and a new version of the UI element is generated. For example, if we update the text parameter to "Hello, Compose!", the Message Composable function is recomposed, and the new text "Hello, Compose!" is displayed.
3. Destroying: When the Activity is destroyed, the Composable function is also destroyed, and any resources allocated by the Composable function are released.

It’s important to note that the Compose framework manages the lifecycle of Composable functions, so you don’t need to worry about explicitly calling methods like onCreate, onStart, onResume, etc. like you would in a traditional Android app. Instead, you can focus on writing your Composable functions and let the Compose framework handle the rest.

If you find this post helpful, don’t forget to clap 😊 & share with your fellow composers 😊

Happy Composing! 👋