compose-state-deferred-reads

Defers Jetpack Compose state reads to layout and draw phases to prevent recomposition.

Updated Jul 1, 2026
One-click install
npx skills add https://github.com/w0lzard/Wolzard-s-Marketplace --skill compose-state-deferred-reads-w0lzard
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: compose-state-deferred-reads
Source: https://github.com/w0lzard/Wolzard-s-Marketplace/tree/main/plugins/personal-skills/skills/compose-state-deferred-reads
Command: npx skills add https://github.com/w0lzard/Wolzard-s-Marketplace --skill compose-state-deferred-reads-w0lzard

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Jetpack Compose code that reads frame-rate state (scroll offsets, animations, gestures) during composition triggers unnecessary recompositions, and back-writing observable state from layout or draw into composition causes cascading invalidation across sibling composables. ## Core Features & Use Cases - Deferred state reads: Converts value-form modifiers like Modifier.offset(x = ...) and graphicsLayer(translationY = ...) into block forms that read State.value inside layout or draw callbacks. - Provider lambdas across boundaries: Replaces passing fast-changing values (scroll offsets, drag positions) into child composables with provider lambdas read only in layout/draw phases. - Back-write detection and fixes: Identifies composition-time writes to mutableStateMapOf/mutableStateListOf and layout-to-composition back-writes (e.g., sibling reading onSizeChanged measurements), with fixes like remember(keys) merges and measure-phase constraint decoration. - Use Case: A LazyColumn hero image recomposes on every scroll frame because firstVisibleItemScrollOffset is read in composition; this Skill rewrites it so the offset is only read inside a graphicsLayer block, eliminating the recomposition storm. ## Quick Start Review my Compose screen for state reads happening in composition that should be deferred to layout or draw phases and fix any back-writing patterns.

Frequently Asked Questions about compose-state-deferred-reads

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I stop recomposition during scroll in Jetpack Compose?

Defer the scroll state read to the layout or draw phase. Instead of reading `listState.firstVisibleItemScrollOffset` in a composable body, pass a provider lambda and read it inside a `graphicsLayer { }` or `offset { }` block so only layout/draw invalidates.

What is the difference between Modifier.offset(x) and Modifier.offset { } in Compose?

The value form `Modifier.offset(x = ...)` reads the value during composition, so changes trigger recomposition. The lambda form `Modifier.offset { IntOffset(...) }` reads during the layout phase, so changes only invalidate layout, skipping composition entirely.

What is back-writing in Jetpack Compose state?

Back-writing is writing observable snapshot state in a phase that invalidates an earlier phase, such as mutating a `mutableStateMapOf` during composition or writing from `onSizeChanged` (layout) to state read in composition. It schedules extra invalidation passes that often cascade into sibling lazy items.

Why does my LazyColumn item recompose when a sibling's size changes?

A sibling likely captures its size with `onSizeChanged` and the item reads that height in composition, creating a layout-to-composition back-write. Fix it by applying the measured height in the measure phase, for example with a constraint-decoration layout modifier.

When should state reads stay in composition instead of being deferred?

Keep the read in composition when the state decides which composables exist or which UI branch to show, since that is a composition decision. Also skip deferral for one-shot cheap animations, tests asserting values directly, or when profiling shows recomposition is not the bottleneck.