deferring-state-reads

To reduce Compose recomposition during scroll and animation, defer hot state reads from the Composition phase to Layout or Draw by migrating value-form modifiers to lambda forms like Modifier.graphicsLayer { }. This moves invalidation downstream, skipping per-frame recomposition.

Deferring state reads in Compose is the technique of moving hot state reads, such as scroll offsets and animation progress, out of the composable body and into lambda modifiers. This shifts invalidation from the Composition phase to the Layout or Draw phase for smoother UI.

You can move scroll offset state reads to the Layout or Draw phase by replacing value-form modifiers with lambda modifiers like Modifier.offset { } or Modifier.drawBehind { }. Hoist hot values across composables using lambda providers (() -> T) to ensure only Layout or Draw phases invalidate.

Deferring state reads using lambda modifiers requires Compose UI 1.7 or higher. You must verify performance improvements using Layout Inspector or @TraceRecomposition to ensure only the lambda-formed reads invalidate the Layout or Draw phases without triggering recomposition.

If your Compose animation triggers recomposition with lambda modifiers, verify the state read is fully hoisted into the lambda block and not evaluated in the composable body. Use @TraceRecomposition to check if value-form reads are accidentally bypassing the deferral and invalidating Composition.

The best way to verify Compose performance improvements from deferring state reads is using Layout Inspector or @TraceRecomposition. These tools confirm that lambda-formed modifier reads only invalidate the Layout or Draw phases, preserving visuals and behavior while reducing recomposition frequency.