avoiding-subcomposition-pitfalls

Detect and mitigate unnecessary subcomposition in Jetpack Compose layouts.

472|16|Updated Apr 29, 2026

Search Tags:#performance #layout #optimization #compose #subcompose #boxwithconstraints #subcomposition

Ready to run

npx skills add https://github.com/skydoves/compose-performance-skills --skill avoiding-subcomposition-pitfalls

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: avoiding-subcomposition-pitfalls
Source: https://github.com/skydoves/compose-performance-skills/tree/main/recomposition/avoiding-subcomposition-pitfalls
Command: npx skills add https://github.com/skydoves/compose-performance-skills --skill avoiding-subcomposition-pitfalls

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

SubcomposeLayout, BoxWithConstraints, and nested Scaffolds can trigger composition during the measure pass, leading to extra layout work and a laggy first frame. This skill helps engineers identify when subcomposition is misused and replace it with cheaper primitives or tuning strategies to keep UI responsive.

Core Features & Use Cases

Detection: Identify hot paths where SubcomposeLayout or BoxWithConstraints trigger measure-phase recomposition.
Mitigation: Recommend alternatives like Modifier.onSizeChanged, layout modifiers, or hoisting constraints to reduce re-subcomposition.
Optimization patterns: Provide guidance for tuning SubcomposeLayout with SubcomposeLayoutState and SubcomposeSlotReusePolicy to reuse slots and precompose when appropriate.

Quick Start

Analyze the target screen to identify measure-phase recomposition caused by SubcomposeLayout or BoxWithConstraints, then implement the recommended substitutions to minimize re-composition.

Frequently Asked Questions about avoiding-subcomposition-pitfalls

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

FAQPage Schema

Why does BoxWithConstraints cause jank in Jetpack Compose?▼

BoxWithConstraints causes jank because it uses SubcomposeLayout, which triggers composition during the measure pass. This creates extra layout work and delays the first frame. Replacing it with Modifier.onSizeChanged or hoisting constraints avoids this measure-phase recomposition.

How do I fix unnecessary subcomposition in Compose?▼

Fix unnecessary subcomposition by replacing SubcomposeLayout and BoxWithConstraints with Modifier.layout or Modifier.onSizeChanged. For unavoidable cases, tune performance using SubcomposeLayoutState with a SubcomposeSlotReusePolicy to reuse slots and minimize re-composition cost.

What is SubcomposeSlotReusePolicy used for in Compose?▼

SubcomposeSlotReusePolicy is used to optimize SubcomposeLayout by reusing composition slots during measure passes. It reduces the performance overhead of layout changes by precomposing elements when appropriate, mitigating the extra layout work that causes visible UI jank.

When should I avoid nested Scaffolds in Jetpack Compose?▼

Avoid nested Scaffolds when they trigger repeated composition during layout changes and cause a laggy first frame. Nested Scaffolds rely on subcomposition, so replacing them with cheaper primitives or layout modifiers prevents extra measure passes and improves UI responsiveness.

Can Modifier.onSizeChanged replace BoxWithConstraints for layout optimization?▼

Yes, Modifier.onSizeChanged can replace BoxWithConstraints to optimize layout. It provides size information without triggering measure-phase recomposition, avoiding the extra composition passes that SubcomposeLayout requires and keeping the UI responsive.

What's the best way to optimize Compose layout performance?▼

Optimize Compose layout performance by identifying hot paths with SubcomposeLayout or BoxWithConstraints and substituting them with Modifier.layout or Modifier.onSizeChanged. If subcomposition is unavoidable, implement SubcomposeLayoutState with a SubcomposeSlotReusePolicy to reduce composition cost.