Thinking in Compose - Tư duy trong Jetpack Compose

// Tìm view theo ID
val textView = findViewById<TextView>(R.id.greeting)
val button = findViewById<Button>(R.id.button)
 
// Thao tác trực tiếp trên widget
button.setOnClickListener {
    textView.text = "Clicked!"
    textView.setTextColor(Color.RED)
}

// ❌ Lỗi thường gặp: Quên cập nhật một view
fun updateUserName(name: String) {
    headerTextView.text = name
    // Quên cập nhật profileTextView!
}
 
// ❌ State conflicts
fun refreshData() {
    loadingView.visibility = View.VISIBLE
    // Nếu user navigate away trong lúc loading...
    fetchData { result ->
        loadingView.visibility = View.GONE  // Crash nếu view đã bị destroy!
        dataView.text = result
    }
}

// ✅ Compose: Mô tả UI là gì, không phải làm thế nào
@Composable
fun Greeting(name: String, isClicked: Boolean) {
    Text(
        text = if (isClicked) "Clicked!" else "Hello, $name",
        color = if (isClicked) Color.Red else Color.Black
    )
}

// ❌ Imperative - Thao tác từng bước
class CounterActivity : AppCompatActivity() {
    private var count = 0
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_counter)
        
        val countText = findViewById<TextView>(R.id.count)
        val button = findViewById<Button>(R.id.increment)
        
        button.setOnClickListener {
            count++
            countText.text = "Count: $count"  // Phải tự cập nhật
        }
    }
}
 
// ✅ Declarative - Mô tả UI dựa trên state
@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    
    Column {
        Text("Count: $count")  // UI tự động cập nhật khi count thay đổi
        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

@Composable
fun ClickCounter(clicks: Int, onClick: () -> Unit) {
    Button(onClick = onClick) {
        Text("I've been clicked $clicks times")
    }
}

@Composable
fun UserScreen(user: User) {
    Column {
        UserAvatar(user.avatarUrl)  // Chỉ recompose nếu avatarUrl thay đổi
        UserName(user.name)          // Chỉ recompose nếu name thay đổi
        UserBio(user.bio)            // Chỉ recompose nếu bio thay đổi
    }
}

// ❌ SAI: Side effect trong composable
@Composable
fun BadExample(viewModel: MyViewModel) {
    viewModel.loadData()  // Side effect! Sẽ chạy lại mỗi lần recompose
    Text("Loading...")
}
 
// ✅ ĐÚNG: Dùng LaunchedEffect cho side effects
@Composable
fun GoodExample(viewModel: MyViewModel) {
    LaunchedEffect(Unit) {
        viewModel.loadData()  // Chỉ chạy một lần
    }
    Text("Loading...")
}

// ❌ SAI: Tính toán nặng trong composable
@Composable
fun ExpensiveScreen(items: List<Item>) {
    val sorted = items.sortedBy { it.name }  // Chạy mỗi recomposition!
    LazyColumn {
        items(sorted) { ItemRow(it) }
    }
}
 
// ✅ ĐÚNG: Cache kết quả với remember
@Composable
fun OptimizedScreen(items: List<Item>) {
    val sorted = remember(items) { items.sortedBy { it.name } }
    LazyColumn {
        items(sorted) { ItemRow(it) }
    }
}

// ❌ SAI: Shared mutable state
var sharedCounter = 0
 
@Composable
fun BadCounter() {
    sharedCounter++  // Race condition!
    Text("Count: $sharedCounter")
}
 
// ✅ ĐÚNG: State được quản lý bởi Compose
@Composable
fun GoodCounter() {
    var count by remember { mutableStateOf(0) }
    Text("Count: $count")
}

// ❌ SAI: Phụ thuộc vào thứ tự thực thi
@Composable
fun BadScreen() {
    var data: String? = null
    
    DataLoader { data = it }  // Có thể chạy sau DataDisplay!
    DataDisplay(data!!)       // Crash nếu data chưa được set
}
 
// ✅ ĐÚNG: Dùng state để đồng bộ
@Composable
fun GoodScreen() {
    var data by remember { mutableStateOf<String?>(null) }
    
    LaunchedEffect(Unit) {
        data = loadData()
    }
    
    data?.let { DataDisplay(it) }
}

// ❌ SAI: Giả định recomposition luôn hoàn thành
@Composable
fun BadProgress() {
    // Nếu recomposition bị hủy, analytics có thể không được gọi
    analytics.logEvent("screen_viewed")
    ProgressIndicator()
}
 
// ✅ ĐÚNG: Dùng SideEffect cho analytics
@Composable
fun GoodProgress() {
    SideEffect {
        analytics.logEvent("screen_viewed")  // Chỉ chạy khi recomposition thành công
    }
    ProgressIndicator()
}

UI = Composable(State)

┌─────────────────────────────────────────┐
│                                         │
│    State ─────────▶ UI (Composables)    │
│      ▲                     │            │
│      │                     ▼            │
│    Logic ◀─────────── Events            │
│                                         │
└─────────────────────────────────────────┘