compose-effects

Validate Jetpack Compose side-effect usage for correct keys and cleanup.

1|1|Updated May 23, 2026
One-click install
npx skills add https://github.com/santimattius/performance-compose-skills --skill compose-effects
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: compose-effects
Source: https://github.com/santimattius/performance-compose-skills/tree/main/skills/compose-effects
Command: npx skills add https://github.com/santimattius/performance-compose-skills --skill compose-effects

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Eliminates performance regressions and subtle bugs caused by incorrect use of Jetpack Compose side effects, such as launching work in the wrong phase, missing exhaustive keys, leaking resources, or re-running expensive logic on every recomposition.

Core Features & Use Cases

  • Choose the right effect: Apply LaunchedEffect, DisposableEffect, SideEffect, and produceState based on whether you need suspend work, cleanup, cheap recomposition-time syncing, or bridging external observables into Compose state.
  • Prevent excessive recomposition work: Use snapshotFlow (with distinctUntilChanged) for high-frequency values like scroll/animation progress, and use derivedStateOf with remember for UI booleans derived from frequently changing inputs.
  • Guarantee correctness with effect rules: Enforce exhaustive keys for LaunchedEffect/DisposableEffect, use rememberUpdatedState for callback updates without restarting long-running coroutines, and ensure onDispose reverses setup to avoid leaks.

Quick Start

Use the compose-effects skill to design the correct LaunchedEffect/DisposableEffect/snapshotFlow/produceState pattern for your composable so the work runs outside the Composition phase, restarts only on the right keys, and cleans up correctly when leaving or changing inputs.

Frequently Asked Questions about compose-effects

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

FAQPage Schema
How do I choose the right Jetpack Compose side effect for my use case?

Use LaunchedEffect for suspend work, DisposableEffect for cleanup, SideEffect for cheap recomposition-time syncing, and produceState to bridge external observables into Compose state.

Why does my Jetpack Compose LaunchedEffect re-run on every recomposition?

Your LaunchedEffect re-runs because it lacks exhaustive keys. Enforce exhaustive keys so the coroutine restarts only when the specified inputs change, preventing performance issues.

How do I convert high-frequency scroll or animation values into Compose state efficiently?

Convert high-frequency scroll or animation values using snapshotFlow paired with distinctUntilChanged. This prevents excessive recomposition work by only emitting values when the underlying state actually changes.

How do I update a callback in a Compose LaunchedEffect without restarting the coroutine?

Use rememberUpdatedState to capture the latest callback updates without restarting a long-running coroutine. This allows your LaunchedEffect to continue executing while referencing the most recent callback value.

How do I prevent resource leaks when using DisposableEffect in Jetpack Compose?

Prevent resource leaks in DisposableEffect by ensuring the onDispose block reverses the setup. This cleanup contract guarantees that subscriptions and observers are properly removed when leaving the composition.

When should I use derivedStateOf instead of produceState in Jetpack Compose?

Use derivedStateOf with remember for UI booleans derived from frequently changing inputs, and use produceState when bridging external event sources into Compose state.