State Hoisting — CompileDaily Study

Penjelasan

State hoisting adalah pola "mengangkat" state dari Composable anak ke Composable INDUK terdekat yang menaungi semua yang butuh data itu — induk mengirim VALUE dan CALLBACK PENGUBAH ke anak lewat parameter, mirip pola lifting state up React persis, cuma istilahnya beda di dokumentasi Compose.

Contoh Konsep

@Composable
fun InputSuhu(suhu: String, onUbah: (String) -> Unit) {
    TextField(value = suhu, onValueChange = onUbah)
}

@Composable
fun TampilanSuhu(suhu: String) {
    Text("Suhu saat ini: ${suhu}°C")
}

@Composable
fun App() {
    var suhu by remember { mutableStateOf("25") } // state diangkat ke sini

    Column {
        InputSuhu(suhu = suhu, onUbah = { suhu = it })
        TampilanSuhu(suhu = suhu)
    }
}

Praktikum

Buat Composable InputPencarian(kataKunci: String, onUbah: (String) -> Unit) dan HasilPencarian(kataKunci: String, menampilkan "Mencari: $kataKunci"). Angkat state kataKunci ke Composable App, sambungkan ke keduanya lewat parameter.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Tipe (String) -> Unit di parameter onUbah adalah TIPE FUNGSI Kotlin — berarti "fungsi yang menerima satu argumen String dan tidak mengembalikan apa pun", pola ini yang dipakai konsisten di Compose untuk callback event, mirip konsep function type props di TypeScript React.