IssueTracker

Jetpack Compose version: 1.7.6 (also tested 1.8.0-alpha08)

Jetpack Compose component(s) used: androidx.compose.foundation.lazy, androidx.compose.runtime.derivedStateOf

Android Studio Build: Build #AI-242.23726.103.2422.12816248, built on December 18, 2024

Kotlin version: 2.1.0

Steps to Reproduce or Code Sample to Reproduce:

1. Execute the code below
2. See that First sticky header and Some extension item are constantly recomposed

I am working with a LazyList that contains many items and some sticky headers. For my use case, I need to know when a specific stick header is actually sticking and change some UI component depending on that. To know when a header is sticking, I am using the snippet provided in this official sample that makes use of derivedStateOf (see isHeaderSticky).

Additionally, I want to separate the components in my list by grouping them as the list is pretty big and crowded. To do so, I use LazyListScope.someExtension() that contains multiple item and items children.

Both derivedStateOf and LazyListScope.someExtension() work fine on their own and do what I would expect. However, if I use them in the same list, I experience constant recomposition of the items that read the isHeaderSticky state and also constant recalculation of the derived state. The logcat output also shows constant repetition of ### Some extension item, ### Calculating state and ### First sticky header.

When running the same code with someExtension(isSticky = isHeaderSticky) commented out, the recomposition and log outputs no longer happen. I also attached two videos showing the difference.

I assume that the extension reads the state in a way that messes up the Compose state handling mechanism. But is this expected behavior? What would you recommend instead if I want to separate out parts of my list in groups of multiple items?

Reproducer example:

package com.example.composeplayground

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.safeContentPadding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyListScope
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material3.Text
import androidx.compose.runtime.SideEffect
import androidx.compose.runtime.State
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.fragment.app.FragmentActivity
import kotlin.random.Random

class MainActivity : FragmentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setupCompose()
    }

    private fun LazyListState.isHeaderSticking(index: Int): State<Boolean> = derivedStateOf {
        println("### Calculating state")
        val firstVisible = layoutInfo.visibleItemsInfo.firstOrNull()
        firstVisible?.index == index && firstVisible.offset == -layoutInfo.beforeContentPadding
    }

    private fun LazyListScope.someExtension(isSticky: Boolean) {
        items(count = 5) {
            Text(
                text = "Some extension item $it",
                color =  if(Random.nextBoolean()) { Color.Cyan } else { Color.Magenta },
            )
        }

        item {
            SideEffect {
                println("### Some extension item")
            }

            Text(
                text = "Some extension item: $isSticky",
                color = if (isSticky) {
                    if(Random.nextBoolean()) { Color.Green } else { Color.Red }
                } else {
                    if(Random.nextBoolean()) { Color.Yellow } else { Color.Blue }
                },
            )
        }
    }

    @OptIn(ExperimentalFoundationApi::class)
    private fun setupCompose() {
        setContent {
            val lazyListState = rememberLazyListState()

            val isHeaderSticky by remember(lazyListState) {
                lazyListState.isHeaderSticking(index = 1)
            }

            LazyColumn(
                state = lazyListState,
                modifier = Modifier.safeContentPadding(),
            ) {
                item {
                    Text(text = "something")
                }

                stickyHeader {
                    SideEffect {
                        println("### First sticky header")
                    }

                    Text(
                        text = "First sticky header",
                        color = if (isHeaderSticky) {
                            if(Random.nextBoolean()) { Color.Green } else { Color.Red }
                        } else {
                            if(Random.nextBoolean()) { Color.Yellow } else { Color.Blue }
                        }
                    )
                }

                someExtension(isSticky = isHeaderSticky)

                items(count = 100) {
                    SideEffect {
                        println("### Some other item $it")
                    }

                    Text(
                        text = "Some other item $it",
                        color =  if(Random.nextBoolean()) { Color.Cyan } else { Color.Magenta }
                    )
                }
            }
        }
    }

}