I'm updating the uiState by calling a corresponding function via clicking the first composable. The second composable recomposes because of it, although it doesn't take any state parameters, only another function.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyScetchApplicationTheme {
Screen(MyViewModel())
}
}
}
}
@Composable
fun Screen(myViewModel: MyViewModel) {
val myUiState by myViewModel.uiState.collectAsState()
Column {
MyBox(myViewModel::changeParameter) // when clicking this
MyBox(myViewModel::changeOtherParameter) // that recomposes
MyBox{ } // but that one doesn't
Text("${myUiState.otherParameter}") // and neither does that one
}
}
@Composable
private fun MyBox(function: () -> Unit) {
Box(
modifier = Modifier
.padding(20.dp)
.size(80.dp)
.background(Color.Gray)
.clickable { function() }
)
}
class MyViewModel: ViewModel() {
private var _uiState = MutableStateFlow(MyUiState())
val uiState: StateFlow<MyUiState> = _uiState.asStateFlow()
fun changeParameter() {
_uiState.update { it.copy(parameter = !uiState.value.parameter) }
}
fun changeOtherParameter() {
_uiState.update { it.copy(otherParameter = !uiState.value.otherParameter) }
}
}
data class MyUiState (
val parameter: Boolean = false,
val otherParameter: Boolean = false,
)
The same composable without a function as an argument doesn't recompose, so it's the function that somehow triggers a recomposition. _ Why does it happen, and how to avoid this recomposition without ditching the function? My project becomes laggy due to abundance of unnecessary recompositions.
Putting function parameter into remember
prevents recomposing:
val onClick = remember {myViewModel.someFunction()}
Credits to @Thracian for the answer in the comments (some useful links are also there)