10 Fitur Jetpack Compose Jarang Dipakai untuk UI Android Pro

Jetpack Compose udah jadi mainstream di Android development, tapi sebagian besar developer cuma pakai komponen dasar: Button, Text, Column, sama animasi sederhana. Padahal, di balik dokumentasi official ada puluhan fitur powerful yang jarang orang bahas di tutorial lokal.

Kalau kamu udah master Compose dasar dan ingin naik level, artikel ini buat kamu. Kita akan explore 10 fitur yang bikin UI lebih polished, efficient, dan wow. Siap-siap nota, dan let's dive in!

1. AnimatedContent — Transisi Konten dengan Smooth

Jika kamu perlu swap konten sambil ada animasi transisi yang smooth, AnimatedContent adalah jawabannya. Fitur ini auto-handle enter/exit animation saat targetState berubah.

AnimatedContent(
  targetState = isLoggedIn,
  transitionSpec = {
    slideInHorizontally() with slideOutHorizontally()
  }
) { state ->
  if (state) {
    Text("Selamat datang!")
  } else {
    Text("Login dulu")
  }
}

Use case: Tab switching, onboarding screens, atau conditional UI yang perlu transisi smooth. Jauh lebih elegan daripada pakai Crossfade untuk setiap kombinasi state.

2. derivedStateOf — Compute State yang Efficient

Banyak dev yang bikin state baru di mana-mana tanpa pikir recomposition. derivedStateOf adalah tool untuk derive state dari state lain tanpa trigger recomposition berlebihan.

val isLongList by derivedStateOf {
  lazyListState.layoutInfo.totalItemsCount > 50
}

if (isLongList) {
  // Render scroll indicator
}

Use case: Conditional logic yang bergantung multiple state, scroll detection, atau computed properties. Ini mengurangi recomposition dan membuat app lebih efficient.

3. CompositionLocal — Share Data Tanpa Prop Drilling

Prop drilling (pass data via banyak parameter) bikin code berantakan. CompositionLocal memungkinkan kamu share data "implisit" dalam composable tree tanpa pass parameter.

val LocalUserTheme = compositionLocalOf {
  error("LocalUserTheme not provided")
}

CompositionLocalProvider(
  LocalUserTheme provides userTheme
) {
  // Semua descendant bisa akses LocalUserTheme.current
  MyScreen()
}

Use case: Theme data, user session, atau config global yang diakses banyak layar. Official Material3 sendiri pakai ini untuk colors, shapes, typography.

4. Modifier.drawWithContent — Custom Drawing Pada Layer

Kalau mau draw something on top atau di bawah composable tanpa create custom layout, Modifier.drawWithContent adalah teman terbaik kamu.

Box(
  Modifier
    .size(100.dp)
    .drawWithContent {
      drawContent()
      drawCircle(
        color = Color.Red,
        radius = 50f
      )
    }
)

Use case: Overlay effects, custom backgrounds, atau decorative elements tanpa add kompleksitas layout.

5. SubcomposeLayout — Layout dengan Measured Children

Layout standar kayak Column atau Box tidak bisa measure child sebelum tentukan ukuran parent. SubcomposeLayout memberikan kontrol penuh — measure child dengan constraints yang kamu definisikan.

SubcomposeLayout { constraints ->
  val measurable = subcompose("item") {
    Text("Hello Compose")
  }
  val placeable = measurable[0].measure(constraints)
  layout(constraints.maxWidth, placeable.height) {
    placeable.place(0, 0)
  }
}

Use case: Custom adaptive layouts yang measure content terlebih dahulu, atau layout yang bergantung ukuran sibling.

6. LookaheadLayout — Predictor untuk Future Layout

LookaheadLayout (atau disebut Lookahead scope) biarkan kamu predict layout yang akan datang sebelum animasi actual layout change terjadi. Ini sangat useful untuk complex animations.

LookaheadLayout { lookaheadScope ->
  Box(
    Modifier
      .animateTo(
        if (expanded) LargeSize else SmallSize
      )
  ) {
    // content
  }
}

Use case: Shared element transitions, complex layout shift animations, atau synchronized animations antara multiple elements.

7. Modifier.semantics — Accessibility yang Proper

Banyak yang skip semantics dan langsung buat UI tanpa beritahu screen reader apa yang sebenarnya terjadi. Modifier.semantics membuat UI kamu accessible untuk pengguna dengan special needs.

Button(
  onClick = { /* ... */ },
  modifier = Modifier.semantics {
    contentDescription = "Buka menu settings"
    role = Role.Button
  }
) {
  Icon(Icons.Default.Settings, null)
}

Use case: Setiap icon button, custom component, atau interaction yang tidak self-explanatory secara visual.

8. Modifier.pointerInput — Gesture Detection Custom

Kalau kamu perlu handle gesture yang lebih kompleks — drag, pinch, multi-touch — Modifier.pointerInput memberikan akses ke raw pointer events.

Box(
  Modifier
    .size(200.dp)
    .pointerInput(Unit) {
      detectDragGestures { change, dragAmount ->
        println("Dragged: $dragAmount")
      }
    }
    .background(Color.LightGray)
)

Use case: Drawing apps, gesture-based navigation, atau interactive components yang gesture standar tidak cover.

9. rememberUpdatedState — Preserve Function Reference

Kalau function parameter sering berubah tapi kamu pengin effect triggered hanya pada mount, gunakan rememberUpdatedState. Ini preserve reference terbaru tanpa restart effect.

val onClickLatest = rememberUpdatedState(onClick)

LaunchedEffect(Unit) {
  delay(1000)
  onClickLatest.value() // Always latest
}

Use case: Effect yang capture callback tapi tidak pengin restart. Common di animation, timeout, atau coroutine-based logic.

10. remember + hashCode untuk Stable State

State yang berubah setiap recomposition bikin animasi jadi jittery. remember dengan key yang stable memastikan state tetap konsisten across recompositions.

val offsetX = remember(key1 = targetState) {
  Animatable(0f)
}

LaunchedEffect(targetState) {
  offsetX.animateTo(targetState.offset)
}

Use case: Animatable, mutable state, atau object yang expensive — pastikan instance sama antar recomposition.

Bonus Tips: Dokumentasi Official adalah Treasure Trove

Semua fitur di atas ada di dokumentasi official Google Developers — compose.foundation dan compose.material3. Tapi memang jarang muncul di tutorial YouTube karena cukup advanced.

Rekomendasi kamu adalah: explore androidx.compose package documentation secara berkala, main dengan contoh code, dan jangan takut experiment. Compose design sangat composable — fitur baru selalu ditambah, dan community juga aktif sharing best practices.

Kesimpulan

Jetpack Compose bukan cuma "Flutter killer" — ia adalah framework yang thoughtfully designed dengan fitur-fitur advanced untuk kasus-kasus real world. 10 fitur di atas adalah starting point. Dengan menguasai ini, kamu bisa buat UI yang tidak hanya beautiful tapi juga performant dan maintainable.

Jangan stuck di tutorial dasar. Dive deeper, baca official docs, dan eksperimen. UI Android kamu akan terasa jauh lebih pro.