Jetpack Compose - avoid unnecessary recomposition

Question

I'm creating a custom slider control for my app but I can't avoid unnecessary recomposition without adding some ugly hacks...

CustomSlider1 is a component that recomposes all its children when the value changes; CustomSlider2 is what I came up with that does not... but the code doesn't seem right, so could anyone tell me what I'm doing wrong in CustomSlider1 and if CustomSlider2 is indeed correct?

The difference between the 2 components is basically that I read the value through a lambda and also added the Slider component inside a Scoped composable.

I'm using recomposeHighlighter to show recompositions.

Here's a gif showing how both behaves when I change its value:

Here's the code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            TestTheme {
                Column {
                    var value by remember {
                        mutableStateOf(50f)
                    }

                    CustomSlider1("Custom Slider", value, 50f, true, { value = it }, 0f..100f, 5)
                    Spacer(modifier = Modifier.padding(10.dp))
                    CustomSlider2("Custom Slider 2", { value }, 50f, true, { value = it }, 0f..100f, 5)
                }
            }
        }
    }
}

@Composable
fun CustomSlider1(
    label: String,
    value: Float,
    defaultValue: Float,
    enabled: Boolean = true,
    onValueChange: (Float) -> Unit,
    valueRange: ClosedFloatingPointRange<Float>,
    steps: Int = 0,
) {
    Column(
        modifier = Modifier.recomposeHighlighter()
    ) {
        Text(
            text = label,
            color = if (enabled) Color.Unspecified else LocalContentColor.current.copy(alpha = 0.5f),
            style = MaterialTheme.typography.bodyMedium,
            modifier = Modifier.recomposeHighlighter()
        )
        Row {
            Slider(
                value = value,
                valueRange = valueRange,
                steps = steps,
                enabled = enabled,
                onValueChange = onValueChange,
                modifier = Modifier
                    .recomposeHighlighter()
                    .weight(1f)
            )

            IconButton(
                onClick = { onValueChange(defaultValue) },
                enabled = enabled,
                colors = IconButtonDefaults.iconButtonColors(contentColor = MaterialTheme.colorScheme.primary),
                modifier = Modifier.recomposeHighlighter()
            ) {
                Icon(
                    imageVector = Icons.Filled.Refresh,
                    contentDescription = null,
                    modifier = Modifier.recomposeHighlighter()
                )
            }
        }
    }
}


@Composable
fun CustomSlider2(
    label: String,
    value: () -> Float,
    defaultValue: Float,
    enabled: Boolean = true,
    onValueChange: (Float) -> Unit,
    valueRange: ClosedFloatingPointRange<Float>,
    steps: Int = 0,
) {
    Column(
        modifier = Modifier.recomposeHighlighter()
    ) {
        Text(
            text = label,
            color = if (enabled) Color.Unspecified else LocalContentColor.current.copy(alpha = 0.5f),
            style = MaterialTheme.typography.bodyMedium,
            modifier = Modifier.recomposeHighlighter()
        )
        Row {
            Scoped { //had to do this to avoid recompositions...
                Slider(
                    value = value.invoke(),
                    valueRange = valueRange,
                    steps = steps,
                    enabled = enabled,
                    onValueChange = onValueChange,
                    modifier = Modifier
                        .recomposeHighlighter()
                        .weight(1f)
                )
            }

            IconButton(
                onClick = { onValueChange(defaultValue) },
                enabled = enabled,
                colors = IconButtonDefaults.iconButtonColors(contentColor = MaterialTheme.colorScheme.primary),
                modifier = Modifier.recomposeHighlighter()
            ) {
                Icon(
                    imageVector = Icons.Filled.Refresh,
                    contentDescription = null,
                    modifier = Modifier.recomposeHighlighter()
                )
            }
        }
    }
}

@Composable
fun Scoped(content: @Composable () -> Unit) = content()

score 4 · Accepted Answer · answered Nov 08 '22 at 16:00

First thing you do to prevent recompositions creating Scope to create recomposition scope to limit recomposition since Column and Row are inline functions that do not create scopes.

Second thing with lambdas. In compose lambdas are unique they defer state read from composition phase of frame to layout or draw phases that's why you don't have recompositions.

Composition->Layout( measure and Layout)->Draw are the phases when a (re)composition is triggered by using lambdas you don't invoke composition phase.

For lambdas and state deferring you can check out official document or question below

// Here, assume animateColorBetween() is a function that swaps between
// two colors
val color by animateColorBetween(Color.Cyan, Color.Magenta)

Box(Modifier.fillMaxSize().background(color))

Here, the box's background color is switching rapidly between two colors. This state is thus changing very frequently. The composable then reads this state in the background modifier. As a result, the box has to recompose on every frame, since the color is changing on every frame.

To improve this, we can use a lambda-based modifier–in this case, drawBehind. That means the color state is only read during the draw phase. As a result, Compose can skip the composition and layout phases entirely–when the color changes, Compose goes straight to the draw phase.

val color by animateColorBetween(Color.Cyan, Color.Magenta) Box(    Modifier
      .fillMaxSize()
      .drawBehind {
         drawRect(color)
      } )

Android Jetpack Compose - Composable Function get recompose each time Text-field value changes

For scoped composition you can check out this question or other answer linked to it

Jetpack Compose - avoid unnecessary recomposition

1 Answers1

Linked