🚀 Jetpack Compose Part 14: State Hoisting – مدیریت هوشمند State در اپلیکیشن‌های کامپوز

تا حالا شده توی کامپوز، state رو تو یه کامپوننت تعریف کنی و بعد ببینی نمی‌تونی ازش جای دیگه استفاده کنی؟
این دقیقاً همون جایی‌ست که «State Hoisting» وارد بازی می‌شه!

🎯 State Hoisting یعنی: برداشتن state از داخل یک کامپوزیبل و انتقالش به بالا (مثلاً به ViewModel یا کامپوزیبل والد) تا چند تا کامپوننت بتونن باهاش کار کنن.

✅ مزیت اصلی:
- کامپوننت‌ها بدون وابستگی مستقیم می‌تونن state رو تغییر بدن
- قابلیت تست کد چند برابر می‌شه
- کد تمیزتر و قابل نگهداری‌تر می‌شه

💡 مثال عملی:
فرض کن یه فرم ورود داری که توش دو تا فیلد «username» و «password» داری.
به جای اینکه هر فیلد state خودش رو داخل خودش داشته باشه، state رو به والد (مثلاً LoginScreen) می‌دی.

🔽 کد ساده و کاربردی:

@Composable
fun LoginScreen() {
    var username by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Column {
        TextField(
            value = username,
            onValueChange = { username = it },
            label = { Text("Username") }
        )
        TextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("Password") }
        )
        Button(
            onClick = { /* login with username & password */ }
        ) {
            Text("Login")
        }
    }
}

🧠 کد بالا چطور کار می‌کنه؟
Stateهای «username» و «password» درون «LoginScreen» تعریف شدن.
ولی هر «TextField» فقط از طریق «onValueChange» اون state رو تغییر می‌ده.
اینجا راز «State Hoisting» همینه: state در بالا نگه داشته شده، و داده فقط به پایین (به کودک) منتقل می‌شه.

🎯 نکته پایانی:
وقتی state رو بالا بکشی، اپلیکیشن پیش‌بینی‌پذیرتر و کدت سازمان‌یافته‌تر می‌شه. این یکی از پایه‌های اصلی Jetpack Compose حرفه‌ایه!

#Codeit #Jetpack #Android #Kotlin #StateHoisting #ComposeTips
🌐 Codeit → https://code-it.ir

━━━━━━━━━━━━━━━
@CodeitMobile

📌 «Recomposition» در Jetpack Compose چیه؟
وقتی state تغییر می‌کنه، Compose مجدداً composable‌های وابسته رو اجرا می‌کنه تا UI به‌روز بشه. به این فرآیند می‌گن «Recomposition».

🔹 نکته مهم: فقط بخش‌هایی که به state تغییر یافته وابسته‌ان recompose می‌شن، نه کل UI.

مثال ساده: یه دکمه شمارنده با «mutableStateOf»:

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    Button(onClick = { count++ }) {
        Text("Clicked: $count")
    }
}

⚡ با هر کلیک، count تغییر می‌کنه و فقط composable «Counter» دوباره اجرا می‌شه. Compose خودش تشخیص می‌ده کدوم بخش‌ها نیاز به به‌روزرسانی دارن.

✅ برای بهینه‌سازی:
- از «remember» برای نگهداری state در recompose استفاده کنید.
- از «derivedStateOf» برای محاسبات سنگین وابسته به state بهره ببرید.

نتیجه: درک «Recomposition» به شما کمک می‌کنه UIهای واکنش‌گرا و کارآمد با کمترین سربار بنویسید.

#Codeit #Android #Kotlin #Jetpack #JetpackCompose #Recomposition #StateManagement #AndroidDev
🌐 Codeit → https://code-it.ir

━━━━━━━━━━━━━━━
@CodeitMobile