compose-state-deferred-reads

Move Jetpack Compose frame-rate state reads into layout and draw phases.

908|42|Updated May 12, 2026

Search Tags:#state-management #compose #provider #render-performance #layout-draw #back-writing

Ready to run

npx skills add https://github.com/chrisbanes/skills --skill compose-state-deferred-reads-chrisbanes

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: compose-state-deferred-reads
Source: https://github.com/chrisbanes/skills/tree/main/skills/compose-state-deferred-reads
Command: npx skills add https://github.com/chrisbanes/skills --skill compose-state-deferred-reads-chrisbanes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Back-writing and early reads of frame-rate state in Jetpack Compose can cause unnecessary recompositions and layout thrashing. This skill provides guidance to keep UI state reads in the correct phase, reducing frame-time jitter and improving performance.

Core Features & Use Cases

Deferred reads: Move state reads from composition into layout/draw callbacks to reduce recomposition.
Provider-based boundaries: Pass scroll/gesture/animation values via providers across composables to limit reads in composition.
Safe measurement coordination: Use measure/decorateMeasureConstraints to coordinate dependent sizes without back-writing.

Quick Start

Refactor a sample Compose screen to read frame-rate state inside a layout or draw callback instead of the composable body.

Frequently Asked Questions about compose-state-deferred-reads

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

FAQPage Schema

Why does my Jetpack Compose UI recompose excessively during scroll or animation?▼

Excessive Compose recomposition occurs when frame-rate state like scroll offsets or animation progress is read during composition instead of the layout or draw phase. Moving these reads into deferred callbacks prevents unnecessary recompositions and layout thrashing.

How do I defer state reads in Jetpack Compose to improve render performance?▼

To defer state reads in Jetpack Compose, move state reads from the composable body into layout or draw phase callbacks. This approach limits recomposition to only when strictly necessary, improving overall render performance.

What is back-writing in Jetpack Compose and how can I prevent it?▼

Back-writing in Jetpack Compose happens when dependent sizes are measured unsafely, causing layout thrashing. You can prevent it by using measure and decorateMeasureConstraints to coordinate measurements safely without triggering frame-time conflicts.

Can I pass scroll or gesture state across composable boundaries without causing recomposition?▼

Yes, you can pass scroll, gesture, or animation values across composable boundaries using provider-based value passing. This limits state reads in the composition phase, restricting heavy read operations to the layout or draw phases.

When should I move Compose state reads into the layout or draw phase?▼

You should move Compose state reads into the layout or draw phase when handling high-frequency frame-rate state such as scroll offsets, animation progress, or gesture states. This prevents these rapidly changing values from triggering expensive recompositions.