Deep Dive into Derived State in Jetpack Compose!

Join my Community on Discord:

In this video, we will learn how to efficiently compute and manage UI-related states in Jetpack Compose with the derived state. In this comprehensive guide, we cover the basics, practical examples, optimization techniques, and best practices for using derived state effectively in your Compose apps

We'll show you how to get started with Turbine and walk you through the steps to test your Kotlin Flow code with ease.

👨🏽🏭 Who I am:
I'm Younes Charfaoui, a Junior Software Engineer and an Android Developer. I make videos about Android development, Technology, and productivity for software engineers.

😋 Be My Friend:

[mohamedfarah]

Thanks brother.. Well explained. Could you make the same video for other side effects in compose?

[balusekhar]

Great example. Can you make a video on snapshot flow and produced state

[Maham-gd]

@Composable
fun Testing2() {
val state = rememberLazyListState()
val scope = rememberCoroutineScope()

// Move derived state computation outside the main composable function
val isButtonShown = remember(state) {
derivedStateOf { state.firstVisibleItemIndex > 0 }
}

Box(
modifier = Modifier
.fillMaxSize()
.padding(16.dp)
){
LazyColumn(
modifier = Modifier.fillMaxSize(),
state = state
){
items(30){
Text(
text = "Hello World",
modifier = Modifier
.size(200.dp)
)
}
}

// Show the button based on the derived state
AnimatedVisibility(visible = isButtonShown.value) {
Log.e(TAG, "RECOMPOSITION DUE TO ISBUTTONSHOWN")
}
}
}. Here when i use or not use derivedStateOf() when i scroll from top to end then number of log cat is 4 and when i go to end and then go to up means first item in list the lines of log cat printed is 2 and when i agin scroll then number of log cat is 4 please explain