I always learn something just by skimming it that makes me want to bookmark the issue now and dig deeper later

SUBSCRIBE NOW

Keep up the good work with the newsletter 💪 I really enjoy it

SUBSCRIBE NOW

Dispatch is a must read for Android devs today and my go-to for keeping up with all things Jetpack Compose

SUBSCRIBE NOW

Dispatch has been my go-to resource as it's packed with useful information while being fun at the same time

SUBSCRIBE NOW

The content is light, fun, and still useful. I especially appreciate the small tips that are in each issue

SUBSCRIBE NOW

I truly love this newsletter ❤️‍🔥 Spot on content and I know there's a lot of effort that goes behind it

SUBSCRIBE NOW

Thanks for taking the time and energy to do it so well

JetpackCompose.app's Newsletter

I always learn something just by skimming it that makes me want to bookmark the issue now and dig deeper later

JetpackCompose.app's Newsletter

Keep up the good work with the newsletter 💪 I really enjoy it

JetpackCompose.app's Newsletter

Dispatch is a must read for Android devs today and my go-to for keeping up with all things Jetpack Compose

JetpackCompose.app's Newsletter

Dispatch has been my go-to resource as it's packed with useful information while being fun at the same time

JetpackCompose.app's Newsletter

The content is light, fun, and still useful. I especially appreciate the small tips that are in each issue

JetpackCompose.app's Newsletter

I truly love this newsletter ❤️‍🔥 Spot on content and I know there's a lot of effort that goes behind it

JetpackCompose.app's Newsletter

Thanks for taking the time and energy to do it so well

Debug State Observation

Author: Andrei Shikov

Ever scratched your head wondering why your Composable is recomposing due to a state read? Even with the Recomposition count tracker in the Layout Inspector, it can be a bit of a guessing game. Well, no more guessing games, because Andrei Shikov has your back! His code snippet lets you pinpoint exactly which state is causing recompositions, thanks to the logs it emits. It's like a GPS for your Compose state issues, and it's super easy to use

  
          package com.example.debugchanges
        
          import androidx.compose.runtime.Composable
        
          import androidx.compose.runtime.Composer
        
          import androidx.compose.runtime.CompositionTracer
        
          import androidx.compose.runtime.DisposableEffect
        
          import androidx.compose.runtime.InternalComposeApi
        
          import androidx.compose.runtime.InternalComposeTracingApi
        
          import androidx.compose.runtime.compositionLocalOf
        
          import androidx.compose.runtime.currentComposer
        
          import androidx.compose.runtime.remember
        
          import androidx.compose.runtime.snapshots.MutableSnapshot
        
          import androidx.compose.runtime.snapshots.Snapshot
        
          import java.util.WeakHashMap
        
          class DebugStateObservation(val id: String) {
        
              class ObservationEntry(val exception: Exception, val functionName: String?)
        
              private val map = WeakHashMap<Any, MutableList<ObservationEntry>>()
        
              val readObserver = { value: Any, function: String? ->
        
                  synchronized(this) {
        
                      val e = Exception()
        
                      val list = map.getOrPut(value) { mutableListOf() }
        
                      list += ObservationEntry(e, function)
        
                  }
        
              }
        
              fun print(changes: Set<Any>) {
        
                  synchronized(this) {
        
                      val affected = map.keys.intersect(changes)
        
                      if (affected.isNotEmpty()) {
        
                          affected.forEach {
        
                              printStateChange(id, it, map[it])
        
                          }
        
                      }
        
                  }
        
              }
        
              fun clear() {
        
                  synchronized(this) {
        
                      map.clear()
        
                  }
        
              }
        
          }
        
          private fun printStateChange(
        
              id: String,
        
              state: Any,
        
              entries: List<DebugStateObservation.ObservationEntry>?
        
          ) {
        
              val traces = entries?.joinToString(separator = "\n") { entry ->
        
                  // remove trace start, sample:
        
                  // at androidx.compose.foundation.demos.DebugStateObservation$readObserver$1.invoke(Test.kt:33)
        
                  // at androidx.compose.foundation.demos.DebugStateObservation$readObserver$1.invoke(Test.kt:31)
        
                  // at androidx.compose.runtime.snapshots.SnapshotKt$mergedReadObserver$1.invoke(Snapshot.kt:1771)
        
                  // at androidx.compose.runtime.snapshots.SnapshotKt$mergedReadObserver$1.invoke(Snapshot.kt:1770)
        
                  // at androidx.compose.runtime.snapshots.SnapshotKt.readable(Snapshot.kt:2003)
        
                  // at androidx.compose.runtime.SnapshotMutableIntStateImpl.getIntValue(SnapshotIntState.kt:138)
        
                  val stackTrace = entry.exception.stackTrace
        
                  buildString {
        
                      if (entry.functionName != null) {
        
                          append("Inside function named: ")
        
                          appendLine(entry.functionName)
        
                      }
        
                      for (i in 10.. minOf(15, stackTrace.size)) {
        
                          appendLine("\tat ${stackTrace[i]}")
        
                      }
        
                      append("\t...")
        
                  }
        
              } ?: ""
        
              println("$id might recompose because $state changed, last read at:\n$traces")
        
          }
        
          /**
        
           * Records state observations inside @Composable [block] and prints to [System.out] whenever
        
           * state mutation is applied.
        
           *
        
           * NOTE: This doesn't record recompositions precisely and only uses snapshot system to record state
        
           * mutations that /might/ invalidate recomposition. Consecutive invocations might result in
        
           * different results depending on functions that were run / skipped during each execution. To be
        
           * used directly inside a function scope that recomposes, as Compose might skip inner scopes and
        
           * reads/mutations are not going to be recorded.
        
           */
        
          @OptIn(InternalComposeApi::class)
        
          @Composable
        
          inline fun DebugStateChanges(id: String, crossinline block: @Composable () -> Unit) {
        
              val parentRegistry = LocalDebugObservationRegistry.current
        
              var registry = parentRegistry
        
              val snapshot = if (registry == null) {
        
                  val currentSnapshot = Snapshot.current
        
                  registry = remember { DebugObservationRegistry() }
        
                  if (currentSnapshot is MutableSnapshot) {
        
                      currentSnapshot.takeNestedMutableSnapshot(registry.readObserver)
        
                  } else {
        
                      currentSnapshot.takeNestedSnapshot(registry.readObserver)
        
                  }
        
              } else {
        
                  Snapshot.current
        
              }
        
              val observation = remember(id) { DebugStateObservation(id) }
        
              DisposableEffect(observation) {
        
                  val disposeHandle = Snapshot.registerApplyObserver { changes, _ ->
        
                      observation.print(changes)
        
                  }
        
                  onDispose {
        
                      observation.clear()
        
                      disposeHandle.dispose()
        
                  }
        
              }
        
              observation.clear()
        
              registry.enter(observation)
        
              snapshot.runAndDispose {
        
                  if (parentRegistry == null) {
        
                      registry.start()
        
                      currentComposer.startProvider(LocalDebugObservationRegistry provides registry)
        
                      block()
        
                      currentComposer.endProvider()
        
                      registry.end()
        
                  } else {
        
                      block()
        
                  }
        
              }
        
              registry.pop()
        
          }
        
          @OptIn(InternalComposeTracingApi::class)
        
          class DebugObservationRegistry : CompositionTracer {
        
              private val stack = ArrayDeque<DebugStateObservation>()
        
              private val functionStack = ArrayDeque<String>()
        
              val readObserver = { it: Any ->
        
                  stack.last().readObserver(it, functionStack.removeLastOrNull())
        
              }
        
              fun enter(observation: DebugStateObservation) {
        
                  stack += observation
        
              }
        
              fun pop() {
        
                  stack.removeLastOrNull()
        
              }
        
              override fun isTraceInProgress(): Boolean = true
        
              override fun traceEventEnd() {
        
                  functionStack.removeLastOrNull()
        
              }
        
              override fun traceEventStart(key: Int, dirty1: Int, dirty2: Int, info: String) {
        
                  functionStack.add(info)
        
              }
        
              fun start() { Composer.setTracer(this) }
        
              fun end() { Composer.setTracer(NoopTracer) }
        
          }
        
          @OptIn(InternalComposeTracingApi::class)
        
          object NoopTracer : CompositionTracer {
        
              override fun isTraceInProgress(): Boolean = false
        
              override fun traceEventEnd() {}
        
              override fun traceEventStart(key: Int, dirty1: Int, dirty2: Int, info: String) {}
        
          }
        
          val LocalDebugObservationRegistry = compositionLocalOf<DebugObservationRegistry?> { null }
        
          // Compose doesn't work with try/finally, but we don't really use it for catching things.
        
          @PublishedApi
        
          internal inline fun <T> Snapshot.runAndDispose(block: () -> T): T =
        
              try {
        
                  enter(block)
        
              } finally {
        
                  dispose()
        
              }

view raw DebugStateObservation.kt hosted with ❤ by GitHub

Here's how you use it:

// Just wrap the composable that you need more
// information about with the following Composable

DebugStateObservation("MyCustomComposable") {
    MyCustomComposable(...)
}

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

	package com.example.debugchanges

	import androidx.compose.runtime.Composable
	import androidx.compose.runtime.Composer
	import androidx.compose.runtime.CompositionTracer
	import androidx.compose.runtime.DisposableEffect
	import androidx.compose.runtime.InternalComposeApi
	import androidx.compose.runtime.InternalComposeTracingApi
	import androidx.compose.runtime.compositionLocalOf
	import androidx.compose.runtime.currentComposer
	import androidx.compose.runtime.remember
	import androidx.compose.runtime.snapshots.MutableSnapshot
	import androidx.compose.runtime.snapshots.Snapshot
	import java.util.WeakHashMap

	class DebugStateObservation(val id: String) {
	class ObservationEntry(val exception: Exception, val functionName: String?)
	private val map = WeakHashMap<Any, MutableList<ObservationEntry>>()

	val readObserver = { value: Any, function: String? ->
	synchronized(this) {
	val e = Exception()
	val list = map.getOrPut(value) { mutableListOf() }
	list += ObservationEntry(e, function)
	}
	}

	fun print(changes: Set<Any>) {
	synchronized(this) {
	val affected = map.keys.intersect(changes)
	if (affected.isNotEmpty()) {
	affected.forEach {
	printStateChange(id, it, map[it])
	}
	}
	}
	}

	fun clear() {
	synchronized(this) {
	map.clear()
	}
	}
	}

	private fun printStateChange(
	id: String,
	state: Any,
	entries: List<DebugStateObservation.ObservationEntry>?
	) {
	val traces = entries?.joinToString(separator = "\n") { entry ->
	// remove trace start, sample:
	// at androidx.compose.foundation.demos.DebugStateObservation$readObserver$1.invoke(Test.kt:33)
	// at androidx.compose.foundation.demos.DebugStateObservation$readObserver$1.invoke(Test.kt:31)
	// at androidx.compose.runtime.snapshots.SnapshotKt$mergedReadObserver$1.invoke(Snapshot.kt:1771)
	// at androidx.compose.runtime.snapshots.SnapshotKt$mergedReadObserver$1.invoke(Snapshot.kt:1770)
	// at androidx.compose.runtime.snapshots.SnapshotKt.readable(Snapshot.kt:2003)
	// at androidx.compose.runtime.SnapshotMutableIntStateImpl.getIntValue(SnapshotIntState.kt:138)
	val stackTrace = entry.exception.stackTrace
	buildString {
	if (entry.functionName != null) {
	append("Inside function named: ")
	appendLine(entry.functionName)
	}
	for (i in 10.. minOf(15, stackTrace.size)) {
	appendLine("\tat ${stackTrace[i]}")
	}
	append("\t...")
	}
	} ?: ""
	println("$id might recompose because $state changed, last read at:\n$traces")
	}

	/**
	* Records state observations inside @Composable [block] and prints to [System.out] whenever
	* state mutation is applied.
	*
	* NOTE: This doesn't record recompositions precisely and only uses snapshot system to record state
	* mutations that /might/ invalidate recomposition. Consecutive invocations might result in
	* different results depending on functions that were run / skipped during each execution. To be
	* used directly inside a function scope that recomposes, as Compose might skip inner scopes and
	* reads/mutations are not going to be recorded.
	*/
	@OptIn(InternalComposeApi::class)
	@Composable
	inline fun DebugStateChanges(id: String, crossinline block: @Composable () -> Unit) {
	val parentRegistry = LocalDebugObservationRegistry.current

	var registry = parentRegistry
	val snapshot = if (registry == null) {
	val currentSnapshot = Snapshot.current
	registry = remember { DebugObservationRegistry() }
	if (currentSnapshot is MutableSnapshot) {
	currentSnapshot.takeNestedMutableSnapshot(registry.readObserver)
	} else {
	currentSnapshot.takeNestedSnapshot(registry.readObserver)
	}
	} else {
	Snapshot.current
	}

	val observation = remember(id) { DebugStateObservation(id) }
	DisposableEffect(observation) {
	val disposeHandle = Snapshot.registerApplyObserver { changes, _ ->
	observation.print(changes)
	}
	onDispose {
	observation.clear()
	disposeHandle.dispose()
	}
	}

	observation.clear()

	registry.enter(observation)
	snapshot.runAndDispose {
	if (parentRegistry == null) {
	registry.start()
	currentComposer.startProvider(LocalDebugObservationRegistry provides registry)
	block()
	currentComposer.endProvider()
	registry.end()
	} else {
	block()
	}
	}
	registry.pop()
	}

	@OptIn(InternalComposeTracingApi::class)
	class DebugObservationRegistry : CompositionTracer {
	private val stack = ArrayDeque<DebugStateObservation>()
	private val functionStack = ArrayDeque<String>()

	val readObserver = { it: Any ->
	stack.last().readObserver(it, functionStack.removeLastOrNull())
	}

	fun enter(observation: DebugStateObservation) {
	stack += observation
	}

	fun pop() {
	stack.removeLastOrNull()
	}

	override fun isTraceInProgress(): Boolean = true

	override fun traceEventEnd() {
	functionStack.removeLastOrNull()
	}

	override fun traceEventStart(key: Int, dirty1: Int, dirty2: Int, info: String) {
	functionStack.add(info)
	}

	fun start() { Composer.setTracer(this) }
	fun end() { Composer.setTracer(NoopTracer) }
	}

	@OptIn(InternalComposeTracingApi::class)
	object NoopTracer : CompositionTracer {
	override fun isTraceInProgress(): Boolean = false

	override fun traceEventEnd() {}

	override fun traceEventStart(key: Int, dirty1: Int, dirty2: Int, info: String) {}

	}

	val LocalDebugObservationRegistry = compositionLocalOf<DebugObservationRegistry?> { null }

	// Compose doesn't work with try/finally, but we don't really use it for catching things.
	@PublishedApi
	internal inline fun <T> Snapshot.runAndDispose(block: () -> T): T =
	try {
	enter(block)
	} finally {
	dispose()
	}