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-

pablisco

@pablisc0

In Compose, MutableState is an interface (thank you, API designers). This means we can create versions like this one, which will debounce state changes if one was made recently.

  
          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()

view raw StateExtensions.kt hosted with ❤ by GitHub

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!

Get it now

The #1 destination for all things Jetpack Compose 🤖📱

Which Compose API?

Compare Frameworks

Compose Catalog

Compose Code Snippets


	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()