[Android] Android Compose navigation 사용 시 recomposition 이슈

compose navigation과 uiState를 사용해서 A -> B로 이동하는 로직을 구현

B화면이 무한으로 실행되는것을 확인

 

기존 코드

val uiState = viewModel.uiState.collectAsStateWithLifecycle().value
var errorAlertState by remember { mutableStateOf(ErrorAlertState()) }
when (uiState) {
    SplashViewModel.SplashUiState.Loading -> Unit
    SplashViewModel.SplashUiState.Loaded -> navigateToList()
    is SplashViewModel.SplashUiState.Failed -> errorAlertState = ErrorAlertState(true, uiState.message)
}

원인은 A에서 B로 이동할 때 A가 recomposition되면서 SplashViewModel.SplashUiState.Loaded -> navigateToList() 부분이 실행.

이로인해 무한 루프가 발생한다.

 

수정 코드

val uiState = viewModel.uiState.collectAsStateWithLifecycle().value
var errorAlertState by remember { mutableStateOf(ErrorAlertState()) }
if (uiState is SplashViewModel.SplashUiState.Failed) errorAlertState = ErrorAlertState(true, uiState.message)

LaunchedEffect(key1 = uiState) {
    if (uiState == SplashViewModel.SplashUiState.Loaded) navigateToList()
}

화면 이동 부분을 LuanchedEffect로 따로 빼서 실행

 

해결됨