-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathmodifier.txt
More file actions
50 lines (37 loc) · 2.26 KB
/
modifier.txt
File metadata and controls
50 lines (37 loc) · 2.26 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
🚀 Deep Dive: How Modifier.composed really works in Jetpack Compose
Ever wondered what actually happens under the hood when you write this line?
Modifier.composed { ... }
Most Android devs know it “creates stateful modifiers,” but the real story goes much deeper — involving lazy wrappers, key-based equality, and recursive materialization.
Here’s what really happens 👇
1️⃣ Creation Phase
Depending on how many keys you pass, Compose creates one of several internal classes:
ComposedModifier (no keys)
KeyedComposedModifier1/2/3/N (with keys for caching)
Each stores your factory function — but doesn’t execute it yet (lazy evaluation 💡).
2️⃣ Materialization Begins
When the modifier is applied to a UI element, Compose calls Composer.materialize().
If it finds a ComposedModifier, it:
✅ Starts a new replaceable group
✅ Invokes your factory function
✅ Gives it full Composer context (so you can use remember, state, etc.)
3️⃣ Recursive Magic
If your modifier returns another ComposedModifier, Compose recursively materializes it — ensuring even nested composed modifiers get their own instance.
4️⃣ The Result
Each element now gets its own isolated modifier instance with its own state.
No shared state
Keys enable caching
Perfect for animations, gestures, or focus logic
5️⃣ Backwards Compatibility
There’s even a side path for older layout compilations using materializeWithCompositionLocalInjection(), which injects the old CompositionLocalMap.
💚 Key Takeaways
composed = lazy, per-element state factory
Each UI element gets its own modifier instance
Keys optimize recomposition
Works recursively for nested modifiers
You’ll want to save this for your next Compose deep dive 🧠
🗺️ I’ve also built a complete flow diagram that visually explains this process — from developer call → lazy creation → runtime materialization → isolated instances.
👉 Check the image below to see how everything connects.
💬 What’s one Modifier.composed use case you’ve built recently?
Animations, gestures, or something custom? Drop it below 👇
