访问LazyListState的layoutInfo为何导致Composable无限重组？

核心原因 #

Compose的重组机制是追踪可组合函数中读取的状态对象，当状态值或引用发生变化时，会触发依赖该状态的可组合部分重新执行。

而layoutInfo是LazyListState里的动态派生状态——每次LazyColumn完成布局更新（比如滚动、item加载/回收、布局微调），layoutInfo都会生成一个新的LayoutInfo实例（或更新内部数据引用）。如果直接在可组合函数顶层读取它，就等于让Compose把整个MyList函数绑定到这个频繁变化的状态上：

1. LazyColumn布局更新 → layoutInfo变化
2. layoutInfo变化触发MyList重组
3. 重组时又会读取layoutInfo，再次绑定依赖
4. 循环往复，导致无限重组

你的操作错误 #

• 错误地在可组合函数顶层直接读取layoutInfo：没有通过Compose提供的状态封装工具处理这个高频变化的派生状态，直接把整个函数纳入了它的依赖链。
• 对layoutInfo的特性认知不足：它是和布局强绑定的临时状态，更新频率极高（甚至滚动时每帧都可能变化），不适合直接作为可组合函数的顶层依赖。

正确的处理方式 #

如果需要基于layoutInfo做业务逻辑，要通过合适的方式隔离依赖，避免触发不必要的重组：

1. 用derivedStateOf包装：只在计算结果真正变化时才触发重组

@Composable
fun MyList(items: List<Item>) {
    val lazyListState = rememberLazyListState()

    // 仅当第一个可见item的索引变化时，才会触发依赖此状态的部分重组
    val firstVisibleIndex = remember {
        derivedStateOf {
            lazyListState.layoutInfo.visibleItemsInfo.firstOrNull()?.index ?: 0
        }
    }

    LazyColumn(state = lazyListState) {
        itemsIndexed(items) { _, item ->
            MyItem(item)
        }
    }
}

2. 在副作用块中访问：比如LaunchedEffect、SideEffect，这类块不会触发可组合函数重组

@Composable
fun MyList(items: List<Item>) {
    val lazyListState = rememberLazyListState()

    // 监听layoutInfo变化，但不会触发MyList重组
    LaunchedEffect(lazyListState) {
        snapshotFlow { lazyListState.layoutInfo }
            .collect { info ->
                // 处理布局信息，比如打印日志、更新非UI状态
            }
    }

    LazyColumn(state = lazyListState) {
        itemsIndexed(items) { _, item ->
            MyItem(item)
        }
    }
}

内容的提问来源于stack exchange，提问作者Ahmad Hamwi