skills.rest
shaharKeisarApps
shaharKeisarAppsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

compose-viewmodel-bridge

Bridges ViewModel StateFlow to Compose UIs using collectAsStateWithLifecycle.

Updated Jan 11, 2025
Search Tags:#lifecycle#android#compose#viewmodel#stateflow#stateInWhileSubscribed#WhileSubscribedOrRetained
One-click install
npx skills add https://github.com/shaharKeisarApps/MoviesAndBeyond --skill compose-viewmodel-bridge
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: compose-viewmodel-bridge
Source: https://github.com/shaharKeisarApps/MoviesAndBeyond/tree/main/.claude/skills/compose-viewmodel-bridge
Command: npx skills add https://github.com/shaharKeisarApps/MoviesAndBeyond --skill compose-viewmodel-bridge

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This skill enables seamless integration between ViewModel StateFlow data and Compose UI, ensuring that UI state is collected with proper lifecycle awareness and resilience during configuration changes.

Core Features & Use Cases

  • Lifecycle-safe state collection: Employs collectAsStateWithLifecycle to prevent leaks and unnecessary recompositions.
  • Configuration-change resilience: Applies a robust state-collection pattern that persists UI state across rotations and theme changes.
  • ViewModel-Compose bridging: Demonstrates how to expose UI state from Hilt-enabled ViewModels and render it in Compose screens.
  • Use Case: Ideal for screens that observe dynamic app state from a ViewModel and must remain stable during navigation and device configuration changes.

Quick Start

Use the skill to wire a StateFlow from your ViewModel to a Composable using collectAsStateWithLifecycle(). Example (conceptual): val viewModel: MoviesViewModel = viewModel() val movies by viewModel.movies.collectAsStateWithLifecycle()

Frequently Asked Questions about compose-viewmodel-bridge

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

FAQPage Schema
How do I collect StateFlow safely in Compose during configuration changes?▼

To prevent StateFlow collection leaks in Compose, use collectAsStateWithLifecycle paired with the stateInWhileSubscribed extension to halt collection when the Composable leaves the composition.

What is the best way to bridge ViewModel StateFlow to Compose UI?▼

The best way to bridge ViewModel StateFlow to Compose UI is by applying the stateInWhileSubscribed extension and WhileSubscribedOrRetained strategy, then rendering the exposed state via collectAsStateWithLifecycle for lifecycle-aware data delivery.

Does collectAsStateWithLifecycle work with Hilt-enabled ViewModels in Compose?▼

Yes, collectAsStateWithLifecycle works with Hilt-enabled ViewModels in Compose to safely expose and render UI state, maintaining resilience during device configuration changes and navigation scenarios.

Why use WhileSubscribedOrRetained for StateFlow in Android Compose?▼

WhileSubscribedOrRetained keeps StateFlow active during configuration changes, ensuring UI state persists across rotations and theme changes without triggering unnecessary recompositions or losing data.

How to expose UI state from a ViewModel to a Composable screen?▼

Expose UI state from a ViewModel to a Composable screen by wiring a StateFlow using the stateInWhileSubscribed extension, then collecting it with collectAsStateWithLifecycle to guarantee lifecycle-safe state rendering.

Related Skills

Explore More Software Engineering Skills→
rock-hurock-hu

android-architecture

Design Android app architecture with Clean Architecture and Hilt dependency injection.

Community
Advanced
drewid74drewid74
8

android-compose-realtime

Reduce Jetpack Compose recomposition from high-frequency StateFlow telemetry reads.

Community
Advanced
thinhtt264thinhtt264

xml-to-compose-migration

Convert Android XML layouts to Jetpack Compose composables.

Community
Intermediate
thinhtt264thinhtt264

android-viewmodel

Manage Android UI state with ViewModel, StateFlow, and SharedFlow.

Community
Basic