Debounce State Changes
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() |
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!
