Increase the Performance in Jetpack Compose part 1

Have you ever wondered why your application is running so slow even though it's just a simple app? well maybe it has to do with unnecessary modifier calculation, you may wonder what’s that? well, that’s what we will talk about in this blog.

We have our screen here called modifierScreen :

@Composable
fun ModifierScreen() {

    var toggle by remember {
        mutableStateOf(false)
    }

    Column(modifier = Modifier.fillMaxSize()) {

        Button(onClick = {
            toggle != toggle
        }
        ) {
           Text(text = "toggle me")
        }
        if (toggle){
            val listOfData = mutableListOf<String>()
            for (i:Int in 0..100000){
                listOfData.add("data")
            }
            DataList(
                data = listOfData
            )
        }

    }
}

so our screen has a toggle variable and its initially set to false, its also mutable so it can change and it also remembered you can learn more about remember in my latest blog

it has a Column and in it, we have a Button, when it’s clicked the value of the toggle will be changed and this button has a Text in it that says toggle me

now if this button is toggled then we would create a list that has 100000 elements that say “data” ( just to simulate fake data) and also we would call another Composable and pass the listOfData to its parameter data

the Composable named DataList looks like this:

@Composable
fun DataList(
    data :  List<String>
){
    LazyColumn{
         items(data){pieceOfData ->
             Text(
                 text = pieceOfData,
                 modifier = Modifier
                     .fillMaxWidth()
                     .onSizeChanged {
                         for (i :Int in 0..100000000){
                             val x = sqrt(i.toDouble()) * i
                                 .toDouble()
                                 .pow(500)
                             val y = x.pow(x) * i
                         }
                     }
             )
         }
    }
}

it’s just a lazyColum that will display the data elements in a Text, in that Text we have a modifier and in that modifier, I added this

.onSizeChanged {
                   for (i :Int in 0..100000000){
                      val x = sqrt(i.toDouble()) * i
                          .toDouble()
                          .pow(500)
                          val y = x.pow(x) * i
                    }
                }

this code doesn't serve any purpose it's just there to do some heavy calculation

So what will happen here is that while scrolling, whenever a text becomes visible to the user the modifier of the Text in our DataList Composable will be calculated

so the more you scroll down, the more text will become visible to you, and the more calculation the modifier will do

but this modifier is every time the same, so we don’t need to allocate resources to it each time a text enters the composition.

if you try to run this code and scroll through the list it will be very laggy, so let’s quickly fix this issue:

val oneTimeCalculatedModifier = Modifier
    .fillMaxWidth()
    .onSizeChanged {
        for (i: Int in 0..100000000) {
            val x = sqrt(i.toDouble()) * i
                .toDouble()
                .pow(500)
            val y = x.pow(x) * i
        }
    }

@Composable
fun DataList(
    data: List<String>
) {
    LazyColumn {
        items(data) { pieceOfData ->
            Text(
                text = pieceOfData,
                modifier = oneTimeCalculatedModifier
            )
        }
    }

}

we now added a new variable called oneTimeCalculatedModifier and we passed it the same Modifier that used to be passed in our Text Composable

in our DataList Composable in our Text Composable, we now pass to our Modifier the oneTimeCalculatedModifier

now the resources to calculate this modifier are only allocated once

and now if you try to run the app it will scroll smoothly without any lag even though we have unnecessary heavy calculations in our modifier

Hope this helps