Global Recomposition Triggered When Using Compose Following a Tutorial #52
Replies: 2 comments
-
Ideally compose skips the recomposition of a function if none of the parameters are changed (unless they're stable). So it shouldn't happen. I would encourage you to update to the latest compose compiler and library versions since lot of performance improvements were done in the recent versions. |
Beta Was this translation helpful? Give feedback.
-
Key Concepts and Solutions Using remember: Smart State Management: Selective Recomposition: Example Solution ViewModel
Composable Functions
|
Beta Was this translation helpful? Give feedback.
-
Hello,
I recently came across an issue while working with Jetpack Compose, which I discovered after watching a tutorial on YouTube (link to tutorial). The problem arose when I was inspecting the layout using Layout Inspector. I noticed that whenever I modify a state variable within a specific Composable, it causes a global recomposition of all Composables that use state management in my project.
This behavior seems inefficient, especially for larger projects where only a portion of the UI should update in response to state changes. My question is, is there a way to improve this? Specifically, can we limit the recomposition to only the Composables that need updating, rather than triggering a global update across all managed states?
I'm looking for advice or solutions that could help optimize the recomposition process and make it more selective. Any guidance or insights would be greatly appreciated.
Thank you for your time and assistance.
@HiltViewModel
class CarViewModel @Inject constructor() : BaseVM() {
private val stateStore = StateStore(CarState.initialState.mutable())
fun setState(update: MutableCarState.() -> Unit) = stateStore.setState(update)
override val state: StateFlow = stateStore.state
}
@GenerateMutableModel
@immutable
interface CarState : State {
val isLocked: Boolean
val isShowNumber: Boolean
}
CarLockedBtn(Modifier.clickable{
vm.setState {
isLocked = !isLocked
}
})
@OptIn(ExperimentalFoundationApi::class)
@composable
fun TopBar(vm: CarViewModel) {
val state by vm.collectState()
val interaction = remember { MutableInteractionSource() }
val batteryStr = if (state.isShowNumber) "100%" else "693km"
Row{
Text(batteryStr )
BatteryImage()
}
}
Beta Was this translation helpful? Give feedback.
All reactions