Without calling recompose, How to update a particular ui component in jetpack?

Question

In my UI, I have a circular progress bar where progress updates every second. Other texts in that UI stays (Static). I want to update only the progress bar, instead of recomposing entire screen. How can I achieve this?

Answer 1

You need to split the screen into different composables so that when a state value changes, all the views that depend on that state are grouped into a single composable.

Take a look at this code for an example:

@Composable
fun TestScreen(
) {
    var progress by remember { mutableStateOf(0f) }
    var otherStateValue by remember { mutableStateOf("") }
    Box {
        SomeTextView(otherStateValue)
        ProgressView(progress)
    }
}


@Composable
fun SomeTextView(text: String) {
    
}

@Composable
fun ProgressView(progress: Float) {

}

The TestScreen will be recomposed if any of the progress and text values change. But if text has not changed since the last recomposition, SomeTextView will be cached and will not be recomposed.

See compose mental model for more details on how recomposition works.

Also, if you build your views wisely, without using any side-effects directly in the code(check out side effects documentation for more details) and caching calculation results with remember/view model/etc(check out state in compose documentation), then recomposition will be a very light operation.