skills.rest
skydoves
skydovesCOMMUNITY
Explore all skills by this author →
Website𝕏@github_skydovesGitHub

migrating-to-modifier-node

Migrate Modifier.composed workflows to Modifier.Node-based modifiers.

472|16|Updated Apr 29, 2026
Search Tags:#migration#lifecycle#jetpack-compose#modifier-node#compose-performance#custom-modifier
One-click install
npx skills add https://github.com/skydoves/compose-performance-skills --skill migrating-to-modifier-node
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: migrating-to-modifier-node
Source: https://github.com/skydoves/compose-performance-skills/tree/main/modifiers/migrating-to-modifier-node
Command: npx skills add https://github.com/skydoves/compose-performance-skills --skill migrating-to-modifier-node

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Traditional custom modifiers in Compose often rely on Modifier.composed { }, which allocates a new composable scope on every recomposition and prevents hoisting, leading to poorer performance. This skill provides a migration path to Modifier.Node, enabling persistent nodes with in-place updates and explicit lifecycle management for draw, layout, semantics, and input behaviors.

Core Features & Use Cases

  • Convert Modifier.composed factories into data class Elements and Node implementations.
  • Leverage specialized interfaces like DrawModifierNode, LayoutModifierNode, SemanticsModifierNode, PointerInputModifierNode, CompositionLocalConsumerModifierNode, and more to express behaviors.
  • Use onAttach/onDetach/onReset and the built-in coroutineScope to manage lifecycles and async work.
  • Control invalidation with shouldAutoInvalidate and explicit invalidateDraw/invalidateMeasurement/invalidatePlacement.
  • Support multi-behavior modifiers via DelegatingNode, reducing single-node complexity.

Quick Start

Identify every Modifier.composed factory in the module and replace it with a data class Element and a Node implementing the corresponding interfaces.

Frequently Asked Questions about migrating-to-modifier-node

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

FAQPage Schema
How do I migrate custom Jetpack Compose modifiers from Modifier.composed to Modifier.Node?▼

To migrate custom Jetpack Compose modifiers, replace Modifier.composed factories with a data class Element and a Node implementation. This migration enables persistent nodes with in-place updates and explicit lifecycle management for draw, layout, and input behaviors.

Why does Modifier.composed cause performance issues in Jetpack Compose?▼

Modifier.composed allocates a new composable scope on every recomposition and prevents state hoisting, leading to poorer performance. Migrating to Modifier.Node resolves this by enabling persistent nodes with explicit lifecycle management.

What specialized interfaces are available for Modifier.Node implementations in Compose?▼

Modifier.Node implementations can leverage specialized interfaces like DrawModifierNode, LayoutModifierNode, SemanticsModifierNode, and PointerInputModifierNode. These interfaces express specific behaviors for drawing, layout, semantics, and pointer input.

How do I manage lifecycle and async work in a Modifier.Node implementation?▼

Manage lifecycle and async work in Modifier.Node by using onAttach, onDetach, and onReset hooks. The built-in coroutineScope handles asynchronous tasks, while shouldAutoInvalidate and explicit invalidation methods control update cycles.

Can I use DelegatingNode to handle multiple behaviors in a single Compose modifier?▼

Yes, you can use DelegatingNode to support multi-behavior modifiers in Jetpack Compose. This approach delegates specialized node interfaces to separate components, reducing single-node complexity during migration.

When should I migrate my custom modifier to Modifier.Node instead of using Modifier.composed?▼

Migrate to Modifier.Node when your custom modifier uses Modifier.composed, requires a persistent node, and participates in drawing, layout, or pointer input. This migration satisfies requirements for Element data classes and specialized node interfaces.

Related Skills

Explore More Software Engineering Skills→
decoutkhanqindevdecoutkhanqindev
8

migrating-to-modifier-node

Migrate Jetpack Compose modifiers from Modifier.composed to Modifier.Node.

Community
Advanced
santimattiussantimattius
1

compose-modifier-system

Enforce correct modifier state read phases and invalidation in Jetpack Compose.

Community
Advanced
cristianbc2004cristianbc2004

Expo UI Jetpack Compose

Integrates Jetpack Compose views into Expo apps using @expo/ui/jetpack-compose.

Community
Intermediate
pacphipacphi
14

Docker Manager

Manage the VisionFlow container lifecycle and execute in-container commands via Docker socket.

Community
Advanced