compose-state-hoisting

Decide where Jetpack Compose UI state and logic should reside.

908|42|Updated May 12, 2026
One-click install
npx skills add https://github.com/chrisbanes/skills --skill compose-state-hoisting-chrisbanes
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: compose-state-hoisting
Source: https://github.com/chrisbanes/skills/tree/main/skills/compose-state-hoisting
Command: npx skills add https://github.com/chrisbanes/skills --skill compose-state-hoisting-chrisbanes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Hoisting UI state in Jetpack Compose helps keep components simple, testable, and reusable by placing state and logic at the appropriate ownership level.

Core Features & Use Cases

  • Guidance on when to keep local remember state vs hoist to the lowest common parent.
  • Patterns for implementing plain state holders and screen-level state holders (ViewModel) to manage business logic.
  • Real-world use: shared UI state across siblings without coupling components to internal state.

Quick Start

Identify a local remember state in a composable and hoist it to the lowest common owner using a plain state holder when sharing state across siblings.

Frequently Asked Questions about compose-state-hoisting

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

FAQPage Schema
What is state hoisting in Jetpack Compose and when should I use it?

State hoisting in Jetpack Compose is the pattern of moving UI state and logic to the appropriate ownership level to keep components simple, testable, and reusable. You use it when state needs to be shared across siblings or coupled to business logic.

How do I decide between using local remember state and a ViewModel in Compose?

Choose local remember state for simple UI state within a single composable. Hoist state to a plain state holder when sharing across siblings, and use a screen-level ViewModel when the state involves business logic, repository calls, or influences the entire screen.

How do I share Compose UI state across multiple sibling composables without coupling them?

To share UI state across siblings, hoist the local remember state to the lowest common parent composable. Implement a plain state holder to manage the hoisted state, allowing siblings to interact without directly coupling to each other's internal state.

When should I use a plain state holder instead of hoisting state as parameters in Compose?

Use a plain state holder when sharing state across multiple composables and the logic grows too complex for simple parameter passing. It encapsulates the hoisted state, whereas direct parameter hoisting is better for simpler state passed directly into child composables.

Does state hoisting affect the composable lifecycle in Jetpack Compose?

Yes, state hoisting guidance includes preserving the composable lifecycle. By placing state and logic at the correct ownership level, such as screen-level state holders for business logic, you ensure components remain simple while respecting lifecycle boundaries.