compose-state-hoisting

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

Updated May 21, 2025
One-click install
npx skills add https://github.com/albertmartorell1975/MeteoMartoCompose --skill compose-state-hoisting-albertmartorell1975
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: compose-state-hoisting
Source: https://github.com/albertmartorell1975/MeteoMartoCompose/tree/main/.agents/skills/compose-state-hoisting
Command: npx skills add https://github.com/albertmartorell1975/MeteoMartoCompose --skill compose-state-hoisting-albertmartorell1975

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Jetpack Compose screens often accumulate scattered remember calls, mixed business logic and layout, and state hoisted farther than needed, making UI hard to preview, test, and maintain. This Skill provides a decision framework for placing state at the right ownership level. ## Core Features & Use Cases - State ownership decision guide: Assign each piece of state to local remember, a common ancestor, a plain state holder, or a screen-level ViewModel based on who reads and writes it. - Plain state holder pattern: Extract coordinated UI-only behavior (scroll, focus, text, sheet state) into a @Stable class with a remember...State factory function. - Screen wiring split: Separate a small state-holder composable that collects app state and effects from a plain UI composable that takes immutable state and event callbacks. - Use Case: When refactoring a search screen where a query drives repository-backed suggestions while LazyListState and FocusRequester coordinate the UI, the Skill directs the query logic to the ViewModel while keeping Compose runtime objects in composition. ## Quick Start Ask the assistant to review your Compose screen and apply state hoisting rules to decide where each piece of state and logic should live.

Frequently Asked Questions about compose-state-hoisting

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

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

Hoist state only to the lowest composable ancestor that needs to read or write it. Keep simple element state local with remember, move shared state to the common parent, and pass immutable state plus event callbacks down the tree.

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

Extract a plain state holder when multiple related remember values are coordinated by the same callbacks, or when scroll, focus, or text state needs named operations like clear or jumpToTop. Do not extract for a single boolean or trivial show/hide logic.

Should a Compose screen take a ViewModel directly?▼

Keep the ViewModel in a small state-holder composable that collects state and effects, then pass immutable UI state and event callbacks to a plain UI composable. This keeps layout previewable and testable without app dependencies.

Can I call scroll or animation suspend functions from viewModelScope?▼

No. Suspend UI operations that require a frame clock, such as scroll or drawer animations, belong in a composition-scoped coroutine like rememberCoroutineScope or LaunchedEffect, not in viewModelScope.

What state should be saved with rememberSaveable in Compose?▼

Save only minimal serializable values that should survive process recreation, such as query strings or selected filter IDs. Do not save runtime objects like LazyListState, FocusRequester, coroutine scopes, or callbacks.