Compose - NavHost recomposition multiple times

Question

During navigation from Navhost, I found out that the composable screens are getting recomposition multiple times. Because of it, my ViewModel is calling API data source multiple times too.

@Composable
fun MainView() {
    val scaffoldState = rememberScaffoldState(rememberDrawerState(DrawerValue.Closed))
    val scope = rememberCoroutineScope()
    val navController = rememberNavController()
    Scaffold(
        scaffoldState = scaffoldState,
        topBar = { TopBar(
            toolbarTitle = stringResource(id = R.string.app_name),
            scope = scope,
            scaffoldState = scaffoldState
        ) },
        drawerContent = {
           DrawerView(scope = scope, scaffoldState = scaffoldState, navController = navController)
        },
    ) {
        NavGraph(navController = navController)
    }
}

@Composable
fun NavGraph(navController: NavHostController) {
    NavHost(navController, startDestination = NavDrawerItem.Repositories.route) {
        composable(NavDrawerItem.Repositories.route) {
            RepoListView(getViewModel())
        }

        composable(NavDrawerItem.EmojiList.route) {
            EmojiListView(getViewModel())
        }
    }
} 

class RepoListViewModel(
    private val repositoriesUseCase: GetRepositoriesUseCase
): ViewModel() {
    
    init {
        getRepositories()
    }

@Composable
fun RepoListView(viewModel: RepoListViewModel) {
    AppTheme {
        RepoListContent(viewModel)
    }
}

Is there a way to handle it? I mean, I know it's how Android Compose works. But, How can I handle an API call inside a navigation screen?

Answer 1

If you're worried about recomposition being the cause of your multiple network calls, you could always make sure that you're only calling into your viewModel once per composable lifecycle with a LaunchedEffect.

So, one approach would be something like:

LaunchedEffect(Unit) {
    viewModel.getRepositories()
}

as long as your key you pass into LaunchedEffect doesn't change it won't recompose. So using Unit will only run this once as long as the composable is alive.

Are you re-creating your viewModel every time you're navigating to that screen? If so, it might be worth looking into putting your network call in another place besides the init block and using the LaunchedEffect approach above OR making it so you're not re-creating your viewModel on every navigation. Whatever fits your use-case best.

Answer 2

Get your viewModel outside the composable() lambda.

@Composable
fun NavGraph(navController: NavHostController) {
    val viewModel: RepoListViewModel = ViewModel()
    NavHost(navController, startDestination = NavDrawerItem.Repositories.route) {
        composable(NavDrawerItem.Repositories.route) {
            RepoListView(viewModel)
        }

        composable(NavDrawerItem.EmojiList.route) {
            EmojiListView(viewModel)
        }
    }
} 

+In case your getViewModel() retrieve a ViewModel using ViewModelProvider, then replace getViewModel() with a call to viewModel()