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.