Article

Links will be mentioned here soon :)

Idea

This project explains how to remove unwanted recompositions and it contains isolated examples that will help you to understand them and then apply the optimizations in your project :)

Where to start

Run the app and it contains a lot of button(s). Now what does that mean? Each item in a column shows a concept, and within that item, there are multiple buttons. The first button will take you to the buggy code and the following button is the possible solution to fix that buggy code.

How to observe recompositions

1. Run the app
2. Open a screen with buggy code eg. CollectionExample
3. Open layout inspector,
4. Observe the recompositions from buggy class
5. Now open the class with the correct approach
6. Observe the recompositions
7. You will see the difference i.e less recompositions in the correct approach, thats its ✨

Video Sample doing the steps above

What the package structure

Each concept is a group by a package within which it contains one bug code and others are the possible solutions. In the example below

• CollectionExample: Buggy code with unwanted recompositions
• CollectionExampleSolutionAnnotation: Solution #1
• CollectionSolutionKotlinx: Solution #2

What's inside class

In each class, it contains a class header that explains the ISSUE and the possible SOLUTIONS

Special Thanks to PhilippNowak96, hi-manshu, PatilShreyas and skydoves for helping me during the process 🙏