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?

EDIT

The problem was Koin itself. A new version has come and now its working properly.

`getViewModel` shouldn't create a new instance on each recomposition. My only guess is that you can call `navigate` multiple times, which will create a new route for each call - check out [this answer](https://stackoverflow.com/a/69491725/3585796) for details. If this won't help, please update your code to [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example), as right now it cannot be run. — Phil Dukhov, Apr 02 '22 at 02:50
as I said it's hard to help you without [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). first of all show your Koin module setup. the problem occures during initial screen appearance or when you're trying to navigate to an other screen? in second case, show the code you're using to perform navigation — Phil Dukhov, May 10 '22 at 03:32
What does `getViewModel()` do? If it is doing anything other than calling the `viewModel()` method, then that's your problem. It is expected, anytime you are animated between destinations, that they recompose on every frame. — ianhanniballake, May 11 '22 at 03:14

score 0 · Answer 1 · answered Apr 01 '22 at 22:23

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.

hey, `LaunchedEffect(Unit)` not working here. Still calling API multiple times when change screens — LMaker, May 09 '22 at 18:55

score 0 · Answer 2 · answered May 14 '22 at 01:57

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()

Compose - NavHost recomposition multiple times

2 Answers2