Handling View State & Side Effects with Lifecycle Awareness in Jetpack Compose MVI Composable

Question

I'm working on a stateful Jetpack Compose composable that follows the MVI architecture. I'm using collectAsStateWithLifecycle() to observe the view state from a view model, but I'm unsure about the best approach to collect side effects with lifecycle awareness.

I'd appreciate your insights on:

• The correctness of the current approach.

• Potential improvements or alternative techniques.

• Best practices for collecting viewstate and side effects with lifecycle awareness in Jetpack Compose.

    @Composable
        fun CountryListScreenContent(callback: (countryName: String) -> Unit) {
            val viewModel: CountryListViewModel = hiltViewModel()
            val countryListViewState by viewModel.viewState.collectAsStateWithLifecycle()
            LaunchedEffect(Unit) {
                viewModel.sideEffect.collect {
                    if (it is CountryListContract.SideEffect.NavigateToDetails) {
                        val countryName = it.countryName
                        callback(countryName)
                    }
                }
            }
            CountryListViewState(viewState = countryListViewState, callback = { it ->
                viewModel.sendIntent(
                    ...
                )
            })
        }   

Answer 1

I have a composable for handling lifecycle events

@Composable
fun ComposableLifecycle(
    lifecycleOwner: LifecycleOwner = LocalLifecycleOwner.current,
    onEvent: (LifecycleOwner, Lifecycle.Event) -> Unit
) {

    DisposableEffect(lifecycleOwner) {
        val observer = LifecycleEventObserver { source, event ->
            onEvent(source, event)
        }
        lifecycleOwner.lifecycle.addObserver(observer)

        onDispose {
            lifecycleOwner.lifecycle.removeObserver(observer)
        }
    }
}

and Its usage is as follows:

@Composable
fun HomeScreen(
    context: Context = LocalContext.current,
    viewModel: MainViewModel = koinViewModel(),
    navController: NavController
) {
//...
    val isLoading by viewModel.isLoading.collectAsState()

    ComposableLifecycle { _, event ->
        val TAG = "HomeScreen LC Event"
        when (event) {
            Lifecycle.Event.ON_START -> {
                Timber.tag(TAG).d("HomeScreen On Start")
                viewModel.doStuff()
                //...
            }
            Lifecycle.Event.ON_RESUME -> {
                Timber.tag(TAG).d("HomeScreen On Resume")
                //...
            }

            else -> {}
        }
    }


    Box(modifier = Modifier
        .fillMaxSize()){
        //...
    }
}

This is an alternative approach that I have been using for a while now. This is only for lifecycle events management code and the side effect code of yours is handled correctly as far as I can see. Basically this is a better approach to handle Lifecycle Events within composable functions. As in MVI it is in best Practices to handle lifecycle events and side effects inside the reactive UI components, in this case composables.