Jetpack Compose Recomposition

Source

Introduction

Hi there👋, I’m here to discuss a topic that can greatly impact the performance of your application while developing with Jetpack Compose, but may not be too apparent during development.

In this article, we will explore the concept of recomposition🕵️‍♂️. We’ll talk about the advantages of using recomposition correctly in our developed applications, as well as the burden it can put on our application when not used properly. Let’s dive in and see what recomposition is all about.

What is Recomposition❓

The working principle of recomposition is that when any element of a Composable function changes, Jetpack Compose recalculates all the functions dependent on that element. This allows for the recalculation of only the necessary elements, leading to improved performance💪.

For example, if a Composable function uses the ImageView element to display an image, this function will be recomputed when the image source changes. However, the Composable function will only be recomputed for changes in the ImageView element. This method is faster and consumes fewer resources compared to older approaches that required recalculations for each aspect of the user interface separately.

Recomposition not only enhances performance but also provides developers with increased functionality by writing less code. However, unnecessary recomputation of Composable functions can negatively impact performance, so it’s important to use recomposition carefully.

There are four keywords commonly associated with recomposition:

• @Composable: Used to define Composable functions where recomposition will be applied.
• remember: Used to store a mutable or immutable value in memory and use it during recomposition.
• by: Used to work with data types like MutableState, MutableStateList, or MutableStateMap that need to be observable during recomposition.
• key: If there are multiple items in a list and each item uses the same Composable function, the key attribute can be used to determine which items need to be recreated during recomposition.

Compose consists of three stages:

1. Composition: Creates the Composable tree that determines what will be displayed.
2. Layout: Determines where the Composable tree specified in the composition stage will be displayed.
3. Draw: Renders the content on the screen.

If there are no changes during the Composition stage, Compose can skip the composition stage and provide performance benefits to the developer.

Advantages and Disadvantages of Recomposition

Disadvantages:

Performance Issues: If unnecessary recompositions are performed in Composable functions, it can negatively impact the application’s performance. Therefore, developers need to use Recomposition carefully and avoid unnecessary recomputations.

Memory Consumption: When Composable functions are recomposed, Jetpack Compose utilizes memory. This can increase the application’s memory consumption, which can in turn affect the performance negatively.

Update Problems: Recomposition allows for the recomputation of the entire function when any item within a Composable function changes. This can be problematic, especially in large applications, as changing one item can affect the entire interface. Therefore, it is recommended for Jetpack Compose developers to make Composable functions as small and specific as possible.

Limited Undo Support: Recomposition does not guarantee proper undoing of Composable functions at all times. Therefore, developers may need to manually handle undo operations when necessary.

Advantages:

Efficiency: Recomposition only recomputes the modified components, avoiding the need to recompute the entire interface. This improves the application’s performance and makes it more efficient.

Simplicity: Jetpack Compose uses direct code writing in Kotlin instead of traditional tools like XML for designing Android interfaces. This allows developers to create interfaces faster and easier.

Modularity: Composable functions can be divided into small reusable parts. This allows developers to make the interface more modular, resulting in cleaner and more readable code.

Easy Testability and Maintenance: Recomposition reduces complexity in the code. Developers only need to specify the recomputation of specific elements when needed. This makes the code more modular and easier to maintain.

Animations: Recomposition can also be used for animations. Automatic recomposition of animations provides a smoother user experience.

Let’s evaluate what we discussed above using an example:

In our example, we have a list to be displayed on a page. List items come from a data source, and each item is clickable. The selected item will be highlighted with a different background color and a larger font size. Each of these features can be implemented using Recomposition.

Recomposition Example with listview

In the ListItem function, the isSelected variable is created using Recomposition. Every time a new item is selected, the isSelected variable changes, triggering automatic recomposition. This updates the background color and font of the selected item.

In the ListScreen function, the selectedItem variable is also created using Recomposition. Whenever a new item is selected, the selectedItem variable changes, triggering recomposition. This highlights the selected item.

In this example, even a simple feature like highlighting the selected item can be achieved using Recomposition. However, Recomposition can be very useful in larger and more complex UIs as well. By recomposing only the elements that change, it can improve performance and provide a faster UI experience. It also makes the code more readable and manageable. This example is designed as a simple demonstration of how Recomposition can be used, but it can be applied to optimize more complex UI elements and even entire pages using Recomposition.

Source

Conclusion

Recomposition, as we have learned, has a positive impact on performance when used correctly, depending on the quality of the program being written. Jetpack Compose offers many advantages in programming, but perhaps the most important one is its requirement for modular and small code pieces. This is good news in terms of code standards. While it may not be significant for small programs, the ability to recalculate only a specific piece without affecting other parts in the application is crucial for larger and complex structures. It will make a significant difference and elevate the user experience to the next level. 🧗🏻

Thank you for reading. Stay healthy and keep coding! 👋👩‍💻👨‍💻.

References

How can I debug recompositions in Jetpack Compose?

Gotchas in Jetpack Compose Recomposition | Stitch Fix Technology - Multithreaded

Jetpack Compose: Debugging Recomposition