compose-state-hoisting

Guides state hoisting and state holder extraction decisions in Jetpack Compose UI code.

1|Updated Jul 6, 2026
One-click install
npx skills add https://github.com/citytexi/team-yg-pesonal-agent --skill compose-state-hoisting-citytexi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: compose-state-hoisting
Source: https://github.com/citytexi/team-yg-pesonal-agent/tree/main/.claude/skills/compose-state-hoisting
Command: npx skills add https://github.com/citytexi/team-yg-pesonal-agent --skill compose-state-hoisting-citytexi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Jetpack Compose screens often accumulate scattered remember state, mixed business logic and layout, and unclear ownership of UI state, making composables hard to preview, test, and maintain. This Skill provides a decision framework for where each piece of state should live. ## Core Features & Use Cases - State ownership decision guide: Assigns state to local remember, the lowest common composable ancestor, a plain state holder class, or a screen-level ViewModel based on who reads and writes it. - Plain state holder pattern: Shows how to extract coordinated UI-only behavior (scroll, focus, text, sheets) into a @Stable class with a remember...State factory, including rememberSaveable guidance. - Screen wiring split: Separates app-dependency wiring (state collection, effects, navigation) from plain state-driven UI composables that take immutable state and event callbacks. - Use Case: When refactoring a search screen where a query drives repository-backed suggestions while a LazyListState and FocusRequester coordinate the UI, the Skill directs the query into the screen state holder while keeping Compose runtime objects in composition. ## Quick Start Review this Compose screen and hoist or extract its state according to the state hoisting decision guide.

Frequently Asked Questions about compose-state-hoisting

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

FAQPage Schema
How do I decide where to hoist state in Jetpack Compose?▼

Hoist state only to the lowest owner that reads or writes it. Keep simple element state local with remember, lift shared state to the lowest common ancestor, extract a plain state holder for coordinated UI-only behavior, and use a ViewModel for business logic or app data.

When should I extract a plain state holder class in Compose?▼

Extract a plain state holder when multiple related remember values share callbacks, UI state needs named operations like clear or jumpToTop, or derived flags clutter the composable. Do not extract for a single boolean or trivial show/hide logic.

Should scroll animations run in viewModelScope or composition scope?▼

Scroll and drawer animations that require a frame clock belong in a composition-scoped coroutine such as rememberCoroutineScope or LaunchedEffect. Moving these suspend calls to viewModelScope breaks their connection to the composition lifecycle.

Can I save LazyListState or FocusRequester with rememberSaveable?▼

No, runtime objects like LazyListState, FocusRequester, and coroutine scopes cannot be saved directly. Save only minimal serializable values such as a query string or selected tab key, then rebuild the runtime objects in composition.

When should a screen composable be split from its ViewModel wiring?▼

Split when a screen takes a ViewModel or component and also owns most layout. Keep dependency injection, state collection, and effect handling in a small wiring composable, then pass immutable UI state and event callbacks to a plain UI composable that is previewable and testable.