After introducing Jetpack Compose to the Android ecosystem by Google, people slowly realize that old MVVM architecture, which after trying to tie it up to Compose we call it Android Architecture Components (AAC) ViewModel, is raising some lifecycle problems. This post is about the problem and its possible solution.

Above wallpaper reference¹

Problem

It's started when P.Y. in Twitter shared this tweet and his post,

which is a correct complain about introducing a new set of race conditions to Android apps by using WhileSubscribed(). He wrote a post, which is basically a reply to a post from the Android Developers blog by Manuel Vivo. The problem in the core is that by using AAC ViewModel we don't know the scope of the logic related to each of composable functions in the view! Notice the scope of each composable function in the view is not reliable as the configuration changes would end the scope, where it should not be, because the logic should survive the configuration change. But on the other hand, the scope of ViewModel itself is too long for the logic of each composable function!

The next tweet that is related to this post is

As you can see my first reaction was that we need to keep the ViewModels, but Jake is right.

Solution

In the sample code of this solution I tried Jake's solution to the problem, which I think is the Molecule library. It's a very simple app that have just one page, but by adding a number on it, we'll use it to make this app a multiple page app.

Before this, we separated the logic of composable functions by using state hoisting, where you can find more details in Jetpack Compose basics. The tree of the views was looking like this.

But as we mentioned before scope of the logic is wider than the scope of the view, so we can separate the hoist composable functions.

Where the logic composable functions live longer than the view composable functions. But it cannot happen unless we share Action and State object between them to be able to decouple them and put them on different trees. Also we rename hoists to presenters, as it's suggested in the Molecule library.

So in the end, we have four trees, where two of them, the view and logic trees, are trees that is built with Jetpack Compose, and the other two trees, the state and action trees, is built by simple object references. You can find the root of logic, state, and action trees in the RootLogic.kt file. Also the root of the view tree is in the Main.kt file.

So as mentioned before, you can check out the sample app source code and play around to make yourself more familiar to the idea.

Please feel free to give me your feedback in Twitter, or make an issue, or a PR on the repository. Hope it solves some problems and makes our life easier.

References

Cite

If you found this work useful, please consider citing:

@misc{hadilq2022Logic,
    author = {{Hadi Lashkari Ghouchani}},
    note = {Published electronically at \url{https://hadilq.com/posts/logic-tree/}},
    gitlab = {Gitlab source at \href{https://gitlab.com/hadilq/hadilq.gitlab.io/-/blob/main/content/posts/2022-09-23-logic-tree/index.md}},
    title = {Logic Tree in Android},
    year={2022},
}