# Android Fundamentals: Jetpack Compose

# Introduction

Hi, dear readers! I'm posting this article before the one related with the project because I realised it would be better to give a short introduction to new concepts before the real project.

That said, let's have a small introduction to **Jetpack Compose**.

# Jetpack Compose

*Jetpack Compose* is a modern toolkit to develop Android apps' UI. Compared to the old [Views](https://developer.android.com/develop/ui/views/layout/declaring-layout) approach that uses XML, this is a lot easier and a less verbose way to create UIs and their functionalities.

Visual elements are created by using special functions called **composable functions**. These functions not just declare how an element looks, they also declare how it behaves. They increase code reusability and testing.

For a function to be considered a composable, it must be annotated by the `@Composable` annotation, and composable functions can only be called if the `@Composable` context exists somewhere up in the call stack.

There is also the `@Preview` annotation, as the name tells us, its purpose is to allow us to see a preview of the composable, but there is a restriction for functions with arguments: they must have default values.

# State Management

A state is a value that can change anytime in the app. Composition is the description of the UI built by Jetpack Compose when it executes composables, taking the form of a tree of UI elements. This represents a state of the UI, and the only way to update it is to run the composables again due to the declarative nature of Jetpack Compose.

The first time a composable is executed it's called *initial composition*. When a state changes for a composable and it needs to be rebuilt, we call it *recomposition*.

Composables can use the `remember` API to store mutable or immutable objects in memory. The value is stored during the initial composition, and restored during recomposition.

`mutableStateOf` creates an observable `MutableState<T>`, which is an observable type. The `MutableState<T>` interface contains a `value: T` field that schedules recomposition for all composables that read it when the value changes.

# Final Words

In this article, we had a brief introduction to Jetpack Compose. This is enough to get started on Android projects, additional features are better learned in practice.

See you in the next article, happy coding.

# References

[Jetpack Compose UI App Development Toolkit](https://developer.android.com/compose)

[Thinking In Compose](https://developer.android.com/develop/ui/compose/mental-model)

[State And Jetpack Compose](https://developer.android.com/develop/ui/compose/state)

[Lifecycle Of Composables](https://developer.android.com/develop/ui/compose/lifecycle)

EOF