optimizing-lazy-layouts

Optimize Jetpack Compose Lazy layouts with stable keys and contentType.

472|16|Updated Apr 29, 2026

Search Tags:#performance #jetpack-compose #content-type #lazy-layouts #scroll-jank #item-key #animate-item

Ready to run

npx skills add https://github.com/skydoves/compose-performance-skills --skill optimizing-lazy-layouts

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: optimizing-lazy-layouts
Source: https://github.com/skydoves/compose-performance-skills/tree/main/lists/optimizing-lazy-layouts
Command: npx skills add https://github.com/skydoves/compose-performance-skills --skill optimizing-lazy-layouts

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Lazy layouts in Jetpack Compose can suffer from scroll jank, lost item state across inserts/removals/reorders, and animations that don't run on inserts/removals when keys or contentType aren't used correctly.

Core Features & Use Cases

Stable item keys to preserve composition state during insertions, removals, and reorders.
contentType for heterogeneous feeds (cards, headers, ads, grids) to reuse the correct item types.
Validation of item composable stability and hoisting heavy allocations outside the item lambda.
Guidance for applying Modifier.animateItem() to maintain visual continuity during mutations.

Quick Start

Audit your Lazy lists to add stable keys, specify contentType for heterogeneous items, hoist heavy allocations outside item lambdas, and validate recomposition behavior with tooling.

Frequently Asked Questions about optimizing-lazy-layouts

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

FAQPage Schema

Why does my Jetpack Compose LazyColumn scroll janky and lose item state?▼

Jetpack Compose Lazy layouts scroll jank and lose item state when stable keys are missing, causing unnecessary recomposition and destroyed state during list insertions, removals, or reorders.

How do I use contentType in Jetpack Compose LazyVerticalGrid for mixed feeds?▼

Use contentType in Jetpack Compose LazyVerticalGrid to differentiate heterogeneous feed items like cards, headers, and ads, ensuring the layout pools and reuses the correct item composition types efficiently.

How do I animate item removals and insertions in Jetpack Compose LazyRow?▼

Animate item insertions and removals in Jetpack Compose LazyRow by applying Modifier.animateItem() and providing a stable key to each list item, maintaining visual continuity during data mutations.

Where should I hoist heavy allocations in Jetpack Compose lazy layouts?▼

Hoist heavy allocations outside the item lambda in Jetpack Compose lazy layouts to prevent object recreation during scrolling, validating item composable stability to minimize recomposition overhead.

Does this approach work for LazyHorizontalGrid with heterogeneous lists?▼

Yes, this approach works for LazyHorizontalGrid and LazyColumn by applying stable IDs as keys and specifying contentType for heterogeneous lists, effectively solving scroll jank and item-state issues.

What's the best way to audit Jetpack Compose lazy layouts for recomposition?▼

Audit Jetpack Compose lazy layouts by validating item composable stability, checking for stable keys and contentType usage, and hoisting heavy allocations outside item lambdas using layout tooling to observe recomposition behavior.