I'm working on a project where I have a very big state for a single screen and the screen itself con...

# compose

[mohamed rejeb]

I'm working on a project where I have a very big state for a single screen and the screen itself contains a lot of UI and I have some states that changes x10 times in less than a second (Drawing state), so when the drawing occurs the big state is changing and there's a lot of unwanted recompositions, I only want the drawing area to recompose, I'm trying to understand recomposition deeper and the only solution that fixes my problem is to extract the drawing state from the big state of the screen and only use that drawing state in the drawing composable, it makes no sense I think that there's a better solution. Also the best practices guides from google is too basic and they're not talking about having a big data class that contains the state of the whole screen and this data class could change many times in a short duration.

[mohamed rejeb]

Here is a simple example:
That's my solution is to have a separate state placeholderState but if I keep it inside the big state the components in TabRow get recomposed even if there's no change to the states related to the TabRow

@Composable
fun App(appComponent: AppComponent) {
    val state = appComponent.state.collectAsState()
    val placeholderState by appComponent.placeholderState.collectAsState()

    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        TabRow(
            state = { state.value },
            onUndo = appComponent::undo,
            onRedo = appComponent::redo
        )

        MyCanvas(
            state = { state.value },
            placeholderState = { placeholderState },
            onCanvasEvent = { appComponent.onCanvasEvent(it) },
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f)
                .padding(20.dp)
                .border(1.dp, Color.Red)
                .clipToBounds()
        )
    }
}

[s3rius]

If you're using Android you can take a look at the compiler metrics (https://github.com/androidx/androidx/blob/androidx-main/compose/compiler/design/compiler-metrics.md) to identify whether your composables are skippable or not.

My guess is, AppComponent is unstable and I think function references to unstable objects tend to be unstable too, so when anything in state changes, TabRow and MyCanvas can't be skipped because the compiler can't figure out that nothing happened.