Exploring Every Corner In Compose Part one

As is widely known, the initial step in implementing UI by Compose is to annotate the function with @Composable. But what's going on under the hood? How does our UI know when recompose has happened? These are important questions to answer when you're writing compose.

What is @Composable annotation:

When we annotate a function with @Composable, we're essentially telling the compiler that this function is responsible for creating a UI element and inserting it into the Compose UI tree. its purpose is to describe how to build a UI component and doesn't return anything. Composable functions don’t build and return UI. They simply emit data to build or update an in-memory structure. That makes them blazing fast and allows the runtime to execute them multiple times without fear.

Purpose of executing composable function?

The only purpose of executing our Composable functions is to build or update the in-memory representation of the tree. That will keep it always up to date with the structure it represents since Composable functions will re-execute whenever the data they read changes.

Consider this Code example:

What's happened to the above code under the hood by the compose compiler?

Don't worry about the Compiler we'll deep dive into it in the next article.

This code is generated in under the hood.

As you can see we have an additional parameter called Composer.

What is Composer:

Compose compiler analyzes your code and adds extra information to it. One key modification is the addition of a hidden parameter called Composer to every composable function. This parameter is automatically managed by the Compose runtime and passed down through the composable hierarchy. It's essential for tracking the UI tree and managing recompositions efficiently. An instance of Composer is injected at runtime, and forwarded to all the child Composable calls so it is accessible from all levels of the tree.

The Composer is forwarded to all the Composable calls within the body. The Composer is the connection between the Composable code we write as developers and the Compose runtime. Composable functions will use it to emit their changes for the tree and therefore inform the runtime about its shape in order to build its in-memory representation or update it.

If I wanna say it in simple words The Composer is The Bridge Between Code and UI The Composer parameter is passed down through every level of a composable function hierarchy. This ensures that all UI elements are connected and managed by the Compose runtime.

The Composer is responsible for:

• Building and updating the UI tree based on the composable functions' instructions.
• Tracking changes to data and triggering necessary UI updates.
• Optimizing the UI rendering process.