Parallel processing with state management in Lazy Column -Jetpack Compose
Sometime being in a lazy state feels good!!
There is a common scenario that we as Android app developers face a lot and that is to have a list and on each item click we would have to process some data in background and reflect the end result back on the list item.
Consider a list like instagram and say we’ve a ‘Like’ button, clicking on which updates the data on server and on successful result, the ‘Like’ button background changes to different color. Now this is a single action on the list. A user can click ‘Like’ button on different items in list and we’ve to update our list for each item correctly as per the result obtained.
In this article we’ll see how can we manage our list state and process data in background concurrently for multiple items and updating them on UI correctly.
End result
By the end we’ll be able to achieve the following result.
Presumption
We’ll assume that we’ve a list of 20 items (could be more/less) and clicking on each item initiates a background task for some time. We’ll be simulating the long running task using delay function and this delay will be randomly assigned to each item so that we can see all items updating themselves randomly.
Control Flow
Let’s code the flow
We’ll have a basic list item for tutorial purpose(no fancy stuff here).
In case you want to checkout how to create custom views/layouts in jetpack compose, do give this and this a read. You won’t be disappointed.
So let’s create our list item first.
And it looks like this
Our list item, when clicked, will start a loader and initiates a background task of some random duration and it looks like as follows
And once the task returns, then it marks it as checked.
Alright! So now we know how our list item will operate. Let’s add it in our list.
The code is self explanatory. Few key points to note here:
- Our list item is stateless which is important. We should follow state hoisting.
- Event handling is done in View model.
- State is updated in list item as it is changed.
Let’s move to view model which provides us with state and data handling.
We prepare a itemList of 20 items with id as index. We create the state for our list by using mutableStateListOf<AppItem>() and also creates an immutable state of this list as itemsState. Finally in init block we add our list objects into our mutable state.
Now once our item is clicked, we check if it is in Not Started state then we launch a new coroutine and pass the item id. We then generate a small random delay and once the delay is over, we update our item id task status which in turn forces a recomposition of our affected list item.
We use IO dispatcher here just to simulate that we’re performing some I/O operation. Lastly, we cancel our coroutines once our scope is finished.
override fun onCleared() {
super.onCleared()
viewModelScope.cancel()
}Bamn! We now have the output in which we’re making concurrent calls and updating our items accordingly.
Once again below is the output for reference.
