Jetpack Compose viewmodel initialisation inside LazyColumn

Question

I have a list of cells which can be Image, Video, List of products, etc. I use a lazy column to display them and for one of the cells which is FeaturedCollection requires a ViewModel which fetches a list of products from the API.

What is the best way to initialise the ViewModel and fetch the products for the FeaturedCollection ?

This is the way I do it currently. In this way is the ViewModel initialised multiple times or created once?

            LazyColumn(
                state = listState,
                modifier = Modifier
                    .weight(1f)
                    .testTag("HomePageList"),

                content = {
                    items(items = it.cells) { cell ->

                        when (cell) {
                            is CollectionsGrid -> {
                                CollectionGrid(
                                    collectionsList = cell,
                                    openCollections = {
                                        openCollections(it)
                                    },
                                )
                            }
                            is CollectionsList -> {
                                HorizontalCollectionList(
                                    collectionsList = cell,
                                    onClick = {
                                        openCollections(it)
                                    }
                                )
                            }
                            is RichText -> {
                                RichTextItem(
                                    design = cell,
                                    openCollections = {}
                                )
                            }
                            is ImageWithTextOverlay -> {
                                ImageWithTextOverlay(
                                    cell = cell,
                                    openCollections = {
                                        openCollections(it)
                                    }
                                )
                            }
                            is Video -> {
                                VideoPlayer(video = cell)
                            }
                            is FeaturedCollection -> {
                                FeaturedCollectionList(
                                    featuredCollection = cell,
                                    openCollections = {
                                        openCollections(it)
                                    },
                                    openProduct = {
                                        openProduct(it)
                                    },
                                    viewModel = hiltViewModel()
                                )
                            }
                        }
                    }

                }
            )

Answer 1

I recommend to pass the viewModel as a parameter in your composable screen

@Composable 
fun HomeScreen(
viewModel: YourViewModel = hiltViewModel()
){

LazyColumn(){
FeaturedCollectionList(){
// use the viewmodel here 
}
}
}