Jetpack Compose behaves strangely - kotlin

Question

I am using an JSON asset file to load some data into app as a List.
fun onGeneral(context: Context): List<List<General>> {
try {
val json = context.assets.open("general.json").bufferedReader().use { it.readText() }
val list = Gson().fromJson<List<General>>(json, object : TypeToken<List<General>>() {}.type)
return listOf(
list.subList(0, 30),
list.subList(30, 60),
list.subList(60, 90),
list.subList(90, 120),
list.subList(120, 150),
list.subList(150, 180),
list.subList(180, 210),
list.subList(210, 240),
list.subList(240, 270),
list.subList(270, 300)
)
} catch (e: Exception) {
return emptyList()
}
}
Since the list is big, I divide it into sublists and as a result, I get a list of sublists in a screen:
var items = remember { mutableStateListOf<Item>() }
val context = LocalContext.current
val general = onGeneral(context)[0] // The first entry
Then I add that general list into the items:
general.forEach { items.add(Item(it)) }
and somewhere on the screen I show the counter
Text("Item ${position + 1} of ${items.size}")
The problem is when entered the screen, the text should show
Item 1 of 30
but it shows a running counter that does not stop:
It just keeps counting up.
Moreover, I added a Log to see what's there is happening:
Log.wtf("TST_Output", "Say Hello, when screen entered!")
Output:
....
E/TST_Output: Say Hello, when screen entered!
E/TST_Output: Say Hello, when screen entered!
E/TST_Output: Say Hello, when screen entered!
E/TST_Output: Say Hello, when screen entered!
E/TST_Output: Say Hello, when screen entered!
E/TST_Output: Say Hello, when screen entered!
E/TST_Output: Say Hello, when screen entered!
E/TST_Output: Say Hello, when screen entered!
E/TST_Output: Say Hello, when screen entered!
E/TST_Output: Say Hello, when screen entered!
E/TST_Output: Say Hello, when screen entered!
E/TST_Output: Say Hello, when screen entered!
E/TST_Output: Say Hello, when screen entered!
E/TST_Output: Say Hello, when screen entered!
E/TST_Output: Say Hello, when screen entered!
E/TST_Output: Say Hello, when screen entered!
....
It runs endless....
I understand, that log outputs are caused by this line
general.forEach { items.add(Item(it)) }
But, when the forEarch loop is done, it should not be repeated again. Why does it keeps running?
I played around and find a solution that does not keep repeating:
var items: MutableList<Item> = remember { mutableStateListOf() }
val temp = arrayListOf<Item>()
general.forEach { temp.add(Item(it)) }
items = temp
Specifying the items variable as MutableList<Item> seems to work.
Additionally, regardless of the issues above, I added that Log line into another Screen, where I do not retrieve any data. In this case the Log line should be triggered one time, but here the Logs:
......
D/ViewRootImpl#e8d5d7b[MainActivity]: reportDrawFinished (fn: -1)
E/TST_Output: Say Hello, when screen entered! <!!!!!!!!!!----------!!!!!!!!
D/CompatibilityChangeReporter: Compat change id reported: 171228096; UID 11701; state: ENABLED
I/ViewRootImpl#e8d5d7b[MainActivity]: Relayout returned: old=(0,0,1440,3040) new=(0,0,1440,3040) req=(1440,3040)0 dur=6 res=0x1 s={true 500687993696} ch=false fn=2
I/OpenGLRenderer: Davey! duration=793ms; Flags=0, FrameTimelineVsyncId=8404895, IntendedVsync=215478232101981, Vsync=215478448768639, InputEventId=0, HandleInputStart=215478449436685, AnimationStart=215478449438954, PerformTraversalsStart=215478749464762, DrawStart=215478991676915, FrameDeadline=215478265435313, FrameInterval=215478449418954, FrameStartTime=16666666, SyncQueued=215479007135992, SyncStart=215479007221531, IssueDrawCommandsStart=215479007348107, SwapBuffers=215479020229915, FrameCompleted=215479025430838, DequeueBufferDuration=20731, QueueBufferDuration=1477346, GpuCompleted=215479025430838, SwapBuffersCompleted=215479022577992, DisplayPresentTime=1554322967633985549,
E/TST_Output: Say Hello, when screen entered! <!!!!!!!!!!----------!!!!!!!!
I/ViewRootImpl#e8d5d7b[MainActivity]: MSG_WINDOW_FOCUS_CHANGED 1 1
D/InputMethodManager: startInputInner - Id : 0
I/InputMethodManager: startInputInner - mService.startInputOrWindowGainedFocus
D/InputMethodManager: startInputInner - Id : 0
W/System: A resource failed to call close.
E/TST_Output: Say Hello, when screen entered! <!!!!!!!!!!----------!!!!!!!!
......
As you can see, that line (marked <!!!!!!!!!!----------!!!!!!!!) was triggered three times.
What's wong? Why the Jetpack Compose behaves so strangely?
Am I doing something wrong?
Any help would be helpful. Thanks a lot.
EDIT:
Code of Screen:
#Composable
#Preview(showBackground = true)
#OptIn(ExperimentalPagerApi::class)
#Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
fun GeneralScreen(controller: NavController = rememberNavController()) {
val context = LocalContext.current
var items: MutableList<Item> = remember { mutableStateListOf() }
var list by remember { mutableStateOf(1) }
var position by remember { mutableStateOf(0) }
val general = onGeneral(context)[0]
val temp = arrayListOf<Item>()
general.forEach {
temp.add(Item(it))
}
items = temp
Log.wtf("TST_Output", "Say Hello, when screen entered!")
Column(Modifier.fillMaxWidth().padding(10.dp), Arrangement.spacedBy(8.dp), Alignment.CenterHorizontally) {
Text("General list $list", fontSize = 18.sp)
Text("Item ${position + 1} of ${items.size}", fontSize = 16.sp, color = Color.Gray)
}
}

Answer 1

The reason why your items list is growing is because you are adding the items to that list inside the scope of the composable. So every time the screen recomposes your items will be re-added to the list.
This same reason applies to the Log entry you added earlier. This will also log every time the screen gets recomposed.
You can prevent this by enclosing the logic inside a LaunchedEffect block. This block will only run after recomposition when the key of that block changes. Here is an example:
var items: MutableList<Item> = remember { mutableStateListOf() }
val context = LocalContext.current
val general = onGeneral(context)[0]
LaunchedEffect(Unit) {
Log.wtf("TST_Output", "Say Hello, when screen entered!")
general.forEach { items.add(Item(it)) }
}
Since we are passing Unit as the key to the LaunchedEffect this will only run once since Unit won't change. If you would want to run the code inside the LaunchedEffect each time general changes. You could use general as key, like this:
var items: MutableList<Item> = remember { mutableStateListOf() }
val context = LocalContext.current
val general = onGeneral(context)[0]
LaunchedEffect(general) {
Log.wtf("TST_Output", "Say Hello, when screen entered!")
// clearing the list since we are re-adding the items
items.clear()
general.forEach { items.add(Item(it)) }
}
I hope this is helpful, if you want to learn more about Side-Effects you could read this.