I need some help understanding and minimizing recomposition. Please see the thread.

# compose

[Dovydas]

I need some help understanding and minimizing recomposition. Please see the thread.

[Dovydas]

@Composable
fun AppScreenRoot(
    viewModel: AppViewModel = koinViewModel<AppViewModel>(),
    onNotLoggedInToEsm: () -> Unit,
    onNotLoggedInToSms: () -> Unit,
) {
    val state by viewModel.state.collectAsStateWithLifecycle()
        AppScreen(
            state = state,
            onAction = { action ->
                viewModel.onAction(action)
            },
        )
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppScreen(
    state: AppState,
    onAction: (AppAction) -> Unit,
    ) {
    val pagerState = rememberPagerState(
        pageCount = { AppTabs.entries.size },
    )
    val refreshState = rememberPullToRefreshState()

    Column {
        AppTopBar(
            modifier = Modifier.fillMaxWidth().statusBarsPadding().padding(vertical = 10.dp, horizontal = 4.dp),
            pagerState = pagerState
        )

        RefreshIndicator(
            modifier = Modifier.fillMaxWidth(),
            refreshState= refreshState,
            isRefreshing = { state.isRefreshing }
        )

        HorizontalPager(
            modifier = Modifier.fillMaxSize(),
            pageSpacing = 30.dp,
            state = pagerState,
        ) {
            TimetableScreenRoot(
                    onRefreshStart = { onAction(AppAction.onRefreshStart) },
                    onRefreshStop = { onAction(AppAction.onRefreshStop) },
                    refreshState
                )
        }
    }
}

[Dovydas]

In this code here, everytime state.isRefreshing changes, both TopAppBar and HorizontalPager recompose even though they do not read that isRefreshing state

[Dovydas]

From my understanding of reading the recomposition docs, the components that do not depend on state that has changed will not recompose, but that doesn't seem to be the case here.

[Zach Klippenstein (he/him) [MOD]]

What is AppState?

[Dovydas]

data class AppState(
    val isEsmLoggedIn: Boolean = false,
    val isSmsLoggedIn: Boolean = false,
    val isInitialized: Boolean = false,
    val isRefreshing: Boolean = false,
)

[Zach Klippenstein (he/him) [MOD]]

How are you determining that TAB and HP recompose?

[Dovydas]

i have a print statement in TAB

[Zach Klippenstein (he/him) [MOD]]

Sorry TAB == ATB, misread

[Zach Klippenstein (he/him) [MOD]]

Can you post AppTopBar?

[Dovydas]

i have some more experimenting and it looks like if I pass state in a lambda it does not recompose ATB:

fun AppScreen(
    state: () -> AppState,
    onAction: (AppAction) -> Unit,
    ) {

But is that really the correct way

[Dovydas]

Yeah I mean AppTopBar

[Zach Klippenstein (he/him) [MOD]]

If PagerState is stable and ATB is not inline and returns Unit then it should be skipped when the caller recomposes.

[Dovydas]

@Composable
fun AppTopBar(
    modifier: Modifier = Modifier,
    pagerState: PagerState
) {

pagerState is just rememberPagerState, sorry if this is a noob question, but how would I check if it's stable?

[Zach Klippenstein (he/him) [MOD]]

Well it sounds like there are two separate recompositions you’re trying to figure out.
1. AppScreen recomposes when you pass in a new AppState. That’s expected, if you change isRefreshing you’re creating a new AppState value, and the only way for that to get into AppScreen is to recompose it. You’re not actually using AppState from AppScreen’s composition though, so passing the lambda allows you to avoid recomposing it although it makes the api more complicated and so I would probably keep it a normal parameter unless it’s changing on every frame, like during an animation or scroll.
2. The “children” of AppScreen, ATB and HP. These shouldn’t be recomposing when AppState changes as far as I can see (given assumptions mentioned in previous message). So I’m not sure what’s going on there. Could be that unrelated state just happens to be changing in the same frame.

[Zach Klippenstein (he/him) [MOD]]

You can use compose compiler metrics to be absolutely sure, but if the type has the @Stable annotation then that also tells you

[Zach Klippenstein (he/him) [MOD]]

If it’s this one then it’s stable

[Zach Klippenstein (he/him) [MOD]]

I think the latest versions of Android studio have some tooling that can help figure out what caused the recomposition

[Dovydas]

Ok so my assuptions were correct. Could be something else, I'll look into it with the Android studio tooling then, thank you. Pagerstate is that one you linked.

[Dovydas]

It's the statusBarPadding modifier that is causing it to recompose:

AppTopBar(
            modifier = Modifier.fillMaxWidth().padding(vertical = 10.dp, horizontal = 4.dp).statusBarsPadding(),
            pagerState = pagerState
        )

[Dovydas]

If I move it directly into AppTopBar then it doesn't recompose but I'd prefer to keep it on the parent screen

[Zach Klippenstein (he/him) [MOD]]

Hm, that uses windowInsetsPadding which is inline AND uses composed, i think it might be recomposing because statusBarsPadding which calls it passes a no-inline inspectorInfo lambda but is not itself composable, which means compose won’t memoize the lambda, so it’s going to be a different instance each time you call the modifier. I bet this is an oversight, i would file a bug.

[Zach Klippenstein (he/him) [MOD]]

interesting find!