-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy path1.txt
More file actions
62 lines (52 loc) · 2.54 KB
/
1.txt
File metadata and controls
62 lines (52 loc) · 2.54 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
51
52
53
54
55
56
57
58
59
60
61
62
🧠 Ever wondered what really happens inside Jetpack Compose when your UI recomposes?
I recently dug into the Compose runtime code — and it blew my mind how elegant (and low-level) this framework really is.
Here’s what I found under the hood 👇
💚 1. The Composer — The Brain of Compose
Every aComposable you write secretly talks to something called the Composer.
It tracks:
- Which UI is being built
- What changed since last time
- When to reuse or skip recomposition
Think of it as the “brain” connecting your function calls to the actual UI tree.
⚡ 2. remember() — The Memory System
This little function is basically Compose’s built-in cache.
val data = remember(userId) { loadUserData(userId) }
If userId doesn’t change, Compose skips the expensive work and reuses the value.
Internally:
- It checks if any key changed (changed() method).
- If yes → recompute.
- If no → reuse cached value.
🧩 3. key() — Identity Management
When you map lists without key, Compose might reuse state incorrectly.
// Wrong
users.forEach { Text(it.name) }
// Right
users.forEach { user ->
key(user.id) { Text(user.name) }
}
Keys tell the Composer:
“Hey, this block is unique — don’t mix up its remembered state.”
⚙️ 4. ComposeNode() — Where UI Nodes Are Born
Every composable eventually becomes a node.
ComposeNode is the bridge between the Composer (logic) and the Applier (actual UI).
It decides when to create, reuse, or update nodes in the tree.
This is the secret sauce that lets Compose skip 90% of UI work efficiently 🚀
🔁 5. Reusable Content = RecyclerView Energy
ReusableContent(key) allows Compose to recycle nodes instead of recreating them.
Perfect for list-heavy UIs or expensive trees — like your own custom recyclers.
It separates state reuse (via remember) from node reuse (via ReusableContent).
🧬 6. Positional Memory Model
Compose doesn’t remember by variable name — it remembers by position in code.
That’s why moving code or missing keys can break state unexpectedly.
Your function’s position defines identity.
That’s also why tools like key() are crucial for stability.
🏗️ Big Picture
Every frame, Compose does this:
- Checks which state changed
- Re-runs only the affected functions
- Compares outputs
- Reuses everything else
The result?
Declarative UI that feels simple — but runs on a surgically optimized runtime.
💬 I’m thinking of doing a visual deep dive next — showing how the Composer, SlotTable, and Applier interact step-by-step.
Would that help you understand Compose internals better? 👇