10 Jetpack Compose features có thể “đổi game” cách bạn build app

Nếu bạn vẫn đang dùng Jetpack Compose theo kiểu… copy lại boilerplate từ 2 năm trước 😄
thì có thể bạn đang build app chậm hơn mức cần thiết.

Compose không đứng yên — nó đã âm thầm bổ sung rất nhiều tính năng xịn mà nhiều dev chưa tận dụng hết.

Dưới đây là 10 thứ đáng để bạn cập nhật ngay trong workflow của mình.

---

1. AnimatedContent – Animation mượt như app xịn

Chuyển state mà UI “giật giật”? → bỏ ngay 😄

AnimatedContent giúp bạn:

• Define cách UI enter/exit
• Slide, fade, scale… tùy ý

AnimatedContent(
    targetState = isLoggedIn,
    transitionSpec = {
        slideInHorizontally { it } togetherWith
        slideOutHorizontally { -it }
    }
) { loggedIn ->
    if (loggedIn) HomeScreen() else LoginScreen()
}

👉 UI mượt = user tin tưởng hơn

---

2. Tránh recomposition thừa (đừng build lại thứ không đổi)

Compose sẽ recompose khi state đổi, nhưng:

👉 Không phải lúc nào cũng nên recompose toàn bộ

Bạn nên:

• Tách nhỏ composable
• Giữ state ổn định
• Tránh tạo object mới mỗi lần render

👉 Mục tiêu: chỉ update đúng phần cần thiết

---

3. derivedStateOf – Tối ưu logic từ state

Khi bạn có state phụ thuộc state khác:

val isButtonEnabled by remember {
    derivedStateOf { input.isNotEmpty() }
}

👉 Tránh tính toán lại không cần thiết 👉 Tối ưu performance rõ rệt

---

4. rememberUpdatedState – tránh bug khi callback thay đổi

Khi dùng side-effect (LaunchedEffect, DisposableEffect):

👉 Callback có thể bị “stale”

Giải pháp:

val currentOnClick by rememberUpdatedState(onClick)

👉 Luôn dùng giá trị mới nhất mà không trigger recomposition

---

⏱️ 5. LaunchedEffect – side-effect đúng cách

Compose không thích side-effect bừa bãi 😄

LaunchedEffect(key) {
    // chạy coroutine
}

👉 Chỉ chạy khi key thay đổi 👉 Tránh bug lifecycle

---

6. Modifier – “vũ khí” mạnh nhưng hay bị dùng sai

Modifier không chỉ là padding hay click.

Bạn có thể:

• Chain logic UI
• Custom behavior
• Reuse logic

👉 Best practice:

• Tách modifier thành function riêng
• Tránh viết inline quá dài

---

7. SnapshotFlow – bridge giữa Compose và Flow

Khi cần convert state → Flow:

snapshotFlow { uiState }
    .collect { ... }

👉 Kết nối Compose với coroutine world 👉 Rất hữu ích cho analytics, tracking

---

8. Lazy layouts – đừng dùng Column cho list lớn 😄

Nếu list dài:

👉 Dùng:

• LazyColumn
• LazyRow

👉 Tránh:

• Render toàn bộ UI → lag

Compose đã optimize sẵn giống RecyclerView

---

9. Key trong list – cực quan trọng nhưng hay bị bỏ qua

items(list, key = { it.id }) { item ->
    ItemView(item)
}

👉 Giữ state đúng khi list thay đổi 👉 Tránh bug UI “nhảy loạn”

---

10. Theming & Preview – tận dụng tool cho nhanh

Compose hỗ trợ:

• Preview nhiều trạng thái
• Dark / Light mode
• Font scale

👉 Giúp bạn:

• Debug UI nhanh hơn
• Không cần build app liên tục

---

Tổng kết nhanh

Jetpack Compose không chỉ là:

❌ “viết UI bằng Kotlin”

Mà là:

✅ “viết UI thông minh hơn, ít code hơn, và đúng flow hơn”

---

Một câu kết nhẹ

Compose không khó — chỉ là bạn chưa dùng hết sức mạnh của nó thôi 😎