skills.rest
chrisbanes
chrisbanesCOMMUNITY
Explore all skills by this author →
Website𝕏@chrisbanesGitHub

compose-state-and-effects

Assigns Jetpack Compose state ownership and selects lifecycle-matched effect APIs for UI code.

1.0k|46|Updated May 12, 2026
Search Tags:#android#Kotlin#jetpack compose#side effects#state hoisting#launchedEffect#State management
One-click install
npx skills add https://github.com/chrisbanes/skills --skill compose-state-and-effects
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: compose-state-and-effects
Source: https://github.com/chrisbanes/skills/tree/main/skills/compose-state-and-effects
Command: npx skills add https://github.com/chrisbanes/skills --skill compose-state-and-effects

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Jetpack Compose code often mixes state ownership, effect lifecycles, and app wiring into composables, causing recomposition bugs, leaked listeners, and untestable screens. This Skill provides a structured review procedure that places every state value at its lowest responsible owner and matches every side effect to the correct lifecycle-aware API.

Core Features & Use Cases

  • State ownership placement: Decides between local remember state, hoisted state, plain UI state holders, and screen-level holders like ViewModel, with a three-seam screen boundary pattern separating wiring, runtime objects, and previewable content composables.
  • Effect API selection: Chooses between LaunchedEffect, DisposableEffect, SideEffect, rememberCoroutineScope, snapshotFlow, and rememberUpdatedState based on lifecycle semantics, with correct keying and cleanup rules.
  • Use Case: When reviewing a screen that collects a Flow, shows a snackbar, and requests focus, use this Skill to verify each effect is keyed by the right semantic input, registrations are paired with onDispose, and the content composable receives only immutable state and callbacks.

Quick Start

Review this Compose screen for state ownership and effect lifecycle issues, and tell me where each state value and side effect should live.

Frequently Asked Questions about compose-state-and-effects

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

FAQPage Schema
How do I choose between LaunchedEffect, DisposableEffect, and SideEffect in Compose?▼

Use LaunchedEffect for suspending or keyed work, DisposableEffect when registering and unregistering listeners or resources with onDispose cleanup, and SideEffect to publish Compose state after every successful recomposition. Key each effect by the semantic input that should restart or dispose it.

When should I hoist state in Jetpack Compose?▼

Hoist state only as far as its logic requires: keep simple UI state local with remember, hoist to the lowest common composable when siblings share it, use a plain state holder for coordinated UI mechanics, and use a ViewModel or screen component for repository calls and business rules.

How do I collect a Flow in a Compose screen correctly?▼

Collect event or side-effect flows inside a LaunchedEffect, and collect render state near the state holder using lifecycle-aware collection such as collectAsStateWithLifecycle on Android. A snapshotFlow converting snapshot reads to a Flow needs a terminal collect operator.

Why does my Compose effect not restart when a value changes?▼

The effect is likely keyed with Unit or a broad state object instead of the changing semantic input. Use the changing value as the effect key; reserve rememberUpdatedState only for reading the latest callback inside a long-lived effect that should not restart.

Can I use rememberUpdatedState to avoid restarting a Flow collection?▼

No. If a changed value like a userId should drive a new collection, it must be a key of the LaunchedEffect. rememberUpdatedState is only for reading the latest callback lazily inside work whose identity should stay stable.

Related Skills

Explore More Software Engineering Skills→
dantech0xffdantech0xff
4

kta-compose-design-tokens

Generate Kotlin Compose design tokens from Stitch, Figma, or Codex Design seeds.

Community
Advanced
soygabimorenosoygabimoreno

compose-state-holder-ui-split

Separate Compose state-holder wiring from UI rendering into distinct composables.

Community
Intermediate
chrisbaneschrisbanes
908

compose-recomposition-performance

Diagnose Jetpack Compose recomposition performance issues across parameter stability, deferred reads, and cross-phase back-writing.

Community
Advanced
cycling02cycling02

android-clean-mvi-architect

Design Android app architectures with Clean Architecture and MVI patterns.

Community
Advanced