Jetpack Compose - Interesting features to dive deeper into.

Recently I got to migrate my sample project from the conventional XML to Jetpack Compose, and I would like to list down the salient features, one can look into to grasp the concepts behind the Jetpack Compose.

The list of concepts behind it would look more or less something like the following -

• Jetpack Compose is a declarative way to define the UI and their state changes as an effect to various events ranging from user interactions to api call results.
• By declarative I mean, we define the UI in terms of Kotlin functions annotated with @Composable that helps the compiler know its a jetpack compose function. A simple demo can be found below -

@Composable
fun SourceHeading() {
    CreateHeading(nameOfTheScreen = SOURCES)
}        

• Now when it comes to handling a mixture of composable and non composable functions(Not annotated with @Composable), we come across something known as Side Effects.
• Further Side Effects refer to some non composable functions being called repetitively due to some state changes of a composable function simply because the non composable lies inside it. Look at the below code -

@Composable
fun SideEffect() {
    var randomVal by remember { mutableStateOf(0) }
    Toast.makeText(context, "Toast", Toast.LENGTH_SHORT).show()

    Column() {
        Button(onClick = { 1 -  randomVal}) {
            Text(text = stringResource(R.string.click_here))
        }
        Text(text = "$randomVal")
    }
}        

• Before understanding the above code, let us understand what is a state in Jetpack Compose.
• A state refers to the condition/value of a variable and we make the jetpack compose remember the condition/value of it using remember or rememberSaveable(In addition rememberSaveable sustains the configuration changes too) something like this -

var randomVal by remember { mutableStateOf(0) }        

• And when the value of a state variable changes, the entire composable is rendered once again with the updated state, the phenomenon which is popularly known as Recompostion.
• Now it remembers the state using the call site and the param with which it was called last time, if any of the above varies it simply recomposes.
• Now jumping back to the Side Effects code, here I am just toggling the value of randomVal from 0 to 1 and vice versa on the button click. Now ideally the toast should be shown just once(according to the business logic, we have for now), but since the state is toggling, the toast is shown multiple times.
• Now to handle such scenarios, we can use a bunch of different SideEffect handlers like - LaunchedEffect(), RememberCoroutineScope() etc depending on our requirements. You can read more about them.
• Jetpack compose offers a global context access using something known as CompositionLocal, which saves our efforts from passing the context as the parameter.

That is it for this article, I have given a lot of things to kick start learning the Jetpack Compose, and I hope you got to learn something about Jetpack Compose from this article. Happy Coding.