Composables

In Jetpack Compose, a Composable is a fundamental building block used to define UI components in a declarative way. It’s a special type of function that can be annotated with the @Composable annotation. Composables describe how the UI should look based on the current state of the app, and they can be combined to build more complex UI structures.

For example, a simple Composable function might look like this:

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!") // Text is a prerdefined composable 
}

Preview

The @Preview annotation in Jetpack Compose is used to show a preview of a Composable function in Android Studio's design editor. It allows you to see how a UI component will look without needing to run the app on an emulator or device. This helps speed up UI development by providing an instant visual feedback loop.

Remember : To see the preview the app needs to build at least once

@Preview // this will show only the composable preview
@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!") // Text is a prerdefined composable 
}

if you want to see the preview along with the background you need to write it like this:

@Preview(showBackground = true)
@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!") // Text is a prerdefined composable 
}

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!") // Text is a prerdefined composable 
}

Recomposition

Recomposition in Jetpack Compose means updating parts of the screen when something changes. For example, if you have a button that shows a number, and the number changes, Jetpack Compose will automatically update that number on the screen without you having to do anything.

Think of it like this: when the data or state (like a number, text, or color) changes, Jetpack Compose will "repaint" the parts of the screen that need to reflect those changes, making sure everything looks up to date. It only updates what’s necessary, so it’s fast and efficient.