Kotlin coroutines in Jetpack Compose: Dispatcher-usage

Question

I have implemented a timer in Jetpack Compose. It counts down a given amount of seconds. The remaining seconds are displayed. Moreover the past and remaining seconds are displayed as a circular graph. The user can start, pause and reset the timer.

Finally it works fine, now. But I'm asking myself if I use Coroutine dispatchers correct.

Here's my code:

@SuppressLint("SimpleDateFormat")
fun formatTime(time: Long): String {
  return SimpleDateFormat("mm:ss").format(Date(time * 1000))
}

@Composable
fun TimerScreen(modifier: Modifier = Modifier) {
  val initTime = 30 L

  var startedAt by remember {
    mutableLongStateOf(System.currentTimeMillis())
  }
  var remainingTime by remember {
    mutableLongStateOf(initTime)
  }
  var isRunning by remember {
    mutableStateOf(false)
  }
  var progress by remember {
    mutableFloatStateOf(1.0 f)
  }

  LaunchedEffect(key1 = startedAt) {
    withContext(Dispatchers.IO) {
      while (remainingTime > 0) {
        if (isRunning) {
          delay(1000)
          withContext(Dispatchers.Main) {
            remainingTime -= 1
            progress -= 0.03333334 f
          }
        }
      }
    }
  }

  Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
  ) {
    Box(contentAlignment = Alignment.Center) {
      CircularProgressIndicator(
        progress = {
          progress
        },
        modifier = Modifier.size(160. dp),
        color = Color.Green,
        strokeWidth = 12. dp,
        trackColor = Color.LightGray
      )
    }
    Spacer(modifier = Modifier.height(10. dp))
    Text(text = formatTime(remainingTime),
      fontSize = 32. sp, fontWeight = FontWeight.Bold)
    Spacer(modifier = Modifier.height(20. dp))
    Row {
      IconButton(onClick = {
        isRunning = !isRunning
      }, modifier = Modifier, enabled = remainingTime > 0) {
        val icon =
          if (isRunning)
            R.drawable.pause_icon
        else
          R.drawable.play_icon
        Icon(painter = painterResource(id = icon),
          modifier = Modifier.size(50. dp),
          contentDescription = "")
      }
      IconButton(onClick = {
        remainingTime = initTime
        startedAt = System.currentTimeMillis()
        isRunning = false
        progress = 1.0 f
      }) {
        Icon(painter = painterResource(id = R.drawable.refresh_icon),
          modifier = Modifier.size(50. dp),
          contentDescription = "")
      }
    }
  }
}

• Is my usage of LaunchedEffect correct? Or should I use something else?

• Is my Dispatchers-usage correct?

Switching to IO was necessary. Running it from Main crashed the app. I switch back to Main, because I'm not sure, if it is a good idea to update the data from a background-thread. A data-update from a background-thread might lead to problems? What's your opinion?

Looking forward to reading your comments and answers.

Answer 1

Thanks for posting this here! I love Compose and love Kotlin!

There are some things that can be improved with your code.

Use Dispatchers.Default

Your dispatchers usage, while it probably works is not entirely correct.

Dispatchers.IO should be used for IO operations, such as reading/writing to hard-drive, communicating with databases, making HTTP Requests and so on.

Dispatchers.Main should be used for things that needs to run on the main thread, in Android this typically includes things that directly modifies the UI elemenets, but I believe in Compose it is not necessary when you change state.

Dispatchers.Default should be - as the name implies - your default choice. It is for making any CPU-related work that does not need to be done on Main thread.

There are no problems with making data-updates from background threads in compose as far as I can remember.

Busy loop

Now consider what happens here when it's NOT running:

  while (remainingTime > 0) {
    if (isRunning) {
      delay(1000)
      withContext(Dispatchers.Main) {
        remainingTime -= 1
        progress -= 0.03333334 f
      }
    }
  }

While this is not running, you have a busy-loop. It will just repeat while (remainingTime > 0) over and over again. This is a lot of CPU wasted.

To fix this, you can add && isRunning as a condition for the while-loop. As if it is not running and is started again, startedAt will be different and therefore launch a new LaunchedEffect.

System.currentTimeMillis

Be careful when using System.currentTimeMillis as automatic time syncs and a user that just feels like changing the date/time of the computer can mess this up.

To measure elapsed time, it's better to use System.nanoTime.

Calculating elapsed time and derived state

The delay is a bit... wobbly. It will delay 1s +/- a few milliseconds. So over time you might get an error from what the actual time elapsed is.

Instead of constantly decreasing the remainingTime and progress I would use withFrameNanos (method callable inside LaunchedEffect) to calculate the remaining time. So for example:

LaunchedEffect(...) {
    withFrameNanos { frameTimeNanos ->
        remainingTime -= frameTimeNanos // Should be correct, I think
        // OR:
        elapsedTime = System.nanoTime() - startedAt // Will never get any errors, as it's always calculated "from scratch".
    }
}

I would also use derivedState to keep track of actual progress and seconds remaining.

val remainingSeconds by remember {
    derivedStateOf {
        remainingNanos / 1_000_000
    }
}

Advanced Topic: Recompositions

Using derivedState helps reducing recompositions. Recompositions trigger when Compose realizes that mutable state has changed that is read in a Composable function. While it might not have a big effect in your current code as it's quite small, if you would have a big and complex UI and read the state early in the hierarchy it would potentially cause recompositions of A LOT. Recompositions is the most expensive thing in Compose as it also triggers Layout and Draw.

---

I hope these suggestions will help!