Jetpack Compose Side Effects — LaunchedEffect With Example

Build responsive Android apps

If you are ready, I will explain the LaunchedEffect through an example. However, before we talk about Launched Effect, let’s talk briefly about Side Effect.

What is a Side Effect?

In programming; A side-effect is when a function changes a variable, value, or object outside its scope.

For example, when we look at the function below, we can see that there is no side effect.

fun sum(number1: Int, number2: Int) = number1 + number2

However, if we create a function like below‚ ultimately, each time the sum function is called, it will change the value of the result variable, thus having a side-effect.

var result = 0
fun sum(number1: Int, number2: Int) = result = number1 + number2

Or, it has a side effect as it will print the sum result as a log.

fun sum(number1: Int, number2: Int) = Log.e("Tag", (number1 + number2).toString())

In short, a side effect is a concept that expresses the change of another state, variable, object, or value during an operation.

What is LaunchedEffect in Jetpack Compose?

LaunchedEffect: run suspend functions in the scope of a composable

• LaunchedEffect is executed once when entered inside the composition. And it is canceled when leaving the composition.
• LaunchedEffect cancels/re-launch when Keys state changes
• LaunchedEffect must have at least one key
• LaunchedEffect Scope’s Dispatcher is Main.

That’s enough technical information for now! Let’s examine it through an example.

In the example, I will try to give you the main idea without giving much importance to the design, scenario, and clean code.

Let’s say we have a doughnut shop and our customers order through our app.

Here’s how our application works.

1. Let’s imagine that we list the types of doughnut(Chocolate, Strawberry, Blueberry, and others) on the homepage and each of our doughnut has an id.
2. Let’s start the DetailsScreen when clicking on a selected doughnut on the homepage and want to show the user, information about the doughnut he has selected..(isAvailable, price, etc…)
3. We have an API to get this information about the doughnut and we will call the api in the DetailsScreen.
4. On the Details page, we also need to get the product qty, etc.

Doughnut Details Screen

Let’s consider the scenario where a product is already selected from the homepage and the DetailsScreen is called and we have the id of the product and see what happens when we don’t use the LaunchedEffect in the first place.

Doughnut Details Screen Without LaunchedEffect

val coroutineScope -> is a scope in which we can run suspend functions. We will make the API call in this scope.
val doughnutCount -> Variable where we keep how many doughnuts the user will order.
val details -> Variable where we keep the API response.

Let’s take a look at the log messages that come when we run the project:

Logs when we use coroutine scope

Compose was created once when DoughnutDetailsScreen was first opened.
Then we made an API call and when the response came, details variable was triggered, and compose was created once again. But wait for a second. What is that!

Logs when we use coroutine scope and increase the number

When we look at the log records, we see that the api has been called again…
Let’s also press the button to increase the number of doughnuts. Every time I update the doughnut count, the API call is made.

As you can see, every time the doughnutCount changes, compose is rebuilt and the api is called over and over. I don’t think we want such a situation.

Let’s make some changes in the codes and look again.

I removed coroutineScope. We don’t need it anymore because we will be using LaunchedEffect and LaunchedEffect will already provide us with a coroutine scope.

Doughnut Details Screen With LaunchedEffect

I added LaunchedEffect and passed productId for the key1 parameter requested from me. This means: Informs LaunchedEffect whether the coroutine should restart or not when the key1 parameter value changes.

Now let’s open Logcat and see if there is a case of repeating the api call when we are using LaunchedEffect.

Logs when we use launched effect

Compose was created once when DoughnutDetailsScreen was first opened.
Then we made an api call and when the response came, details was triggered, and compose was created once again. But as you noticed, no API call was made again..

And let’s go ahead and update the number of doughnuts.

Logs when we use launched effect and increase the number

We also updated the number of doughnuts and as you can see, an API call is not made in every update.

I will explain DisposableEffect in my next Medium post. Until then, take care.