EmergeTools logo
🙏 Supported by Emerge Tools
The platform for all your mobile performance needs

Debounce State Changes

Author: Pablisco

Pablisco did a fantastic job of highlighting how good APIs can be extended for custom behavior that one might need in their app. In this snippet, Pablisco extends the MutableState class to debounce state changes. This is a common requirement in many apps, and Pablisco's implementation is a great starting point for anyone looking to implement this in their app.

He went on to explain how one common use case for this is if a hover or a click event changes a 'togglable' state. We've all used one of those websites that open a menu when hovering over it but then closes when clicked because we didn't know it would react to hovering.

You can find his entire thread which goes into more details-

import androidx.compose.runtime.MutableState
import androidx.compose.runtime.State
import androidx.compose.runtime.mutableStateOf
fun <T> debouncedMutableStateOf(
initialValue: T,
debounceTime: Long = 500,
): MutableState<T> {
var lastUpdate = now()
return mutableStateOf(initialValue).bimap(
read = { it },
write = { newValue: T ->
now().let { now ->
newValue.takeIf { now - lastUpdate > debounceTime }
?.also { lastUpdate = now } ?: value
fun <T, R> State<T>.map(block: (T) -> R): State<R> =
object : State<R> {
override val value: R get() = this@map.value.let(block)
fun <T, R> MutableState<T>.bimap(
read: (T) -> R,
write: State<T>.(R) -> T,
): MutableState<R> =
object : MutableState<R> {
override var value: R
get() = this@bimap.value.let(read)
set(value) {
this@bimap.value = write(value)
override fun component1(): R = value
override fun component2(): (R) -> Unit =
{ this@bimap.value = write(it) }
private fun now() = System.currentTimeMillis()

Have a project you'd like to submit? Fill this form, will ya!

If you like this snippet, you might also like:

Maker OS is an all-in-one productivity system for developers

I built Maker OS to track, manage & organize my life. Now you can do it too!