avoiding-subcomposition-pitfalls

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.

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.

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.

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.

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.

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.