شکلی کلی این کنترل کنند Handler به این صورت است :

اما در داخل کد های ما اغلب به این صورت استفاده میشه :

LaunchedEffect(isLoading.value) {
        if (isLoading.value) {
            // Perform a long-running operation, such as fetching data from a network
            val newData = fetchData()
            // Update the state with the new data
            data.value = newData
            isLoading.value = false
        }
    }

هنگامی که LaunchedEffect وارد ترکیب (Composition) می‌شود، یک کوروتین (coroutine) با بلوک کدی که به عنوان پارامتر به آن داده شده است، راه‌اندازی می‌کند. اگر LaunchedEffect از ترکیب خارج شود، این کوروتین لغو خواهد شد

LaunchedEffect به صورت خلاصه پل ارتباطی بین دنیای UI کامپوزبل و دنیای ناهمگام (Asynchronous) کوروتین‌هاست.

با جزئیات بیشتر توضیح بدم:

1. هدف اصلی:
   • اجرای توابع suspend (توابعی که می‌تونن موقتاً اجرای خودشون رو متوقف کنن و بعداً از همون نقطه ادامه بدن، بدون فریز کردن برنامه) در محدوده عمر یک کامپوزبل خاص.
   • وقتی نیاز داری در طول عمر یک Composable کاری ناهمگام انجام بدی (مثل درخواست شبکه، تأخیر دادن، انیمیشن‌های پیچیده)، LaunchedEffect ابزار اصلی شماست.
2. ایجاد کوروتین (Coroutine):
   • وقتی LaunchedEffect وارد Composition (همون ساختار درختی UI که Compose میسازه) میشه، یک کوروتین جدید راه‌اندازی می‌کنه.
   • کد بلوک { … } که به LaunchedEffect میدی، داخل این کوروتین جدید اجرا میشه.
3. مدیریت چرخه عمر (Lifecycle Management):
   • این مهم‌ترین ویژگی LaunchedEffect هست: کوروتین راه‌اندازی شده توسط LaunchedEffect به چرخه عمر کامپوزبلی که LaunchedEffect رو فراخوانی کرده، متصل میشه.
   • چه اتفاقی میفته؟
     • ورود به Composition: وقتی کامپوزبل حاوی LaunchedEffect برای اولین بار روی صفحه ظاهر میشه، کوروتین راه‌اندازی میشه و کارش رو شروع می‌کنه.
     • خروج از Composition: اگر کامپوزبل از صفحه حذف بشه (مثلاً کاربر به صفحه دیگه بره)، کوروتین مربوط به LaunchedEffect به صورت خودکار لغو (Cancelled) میشه . این یعنی هیچ کار اضافه‌ای در پس‌زمینه انجام نمیشه و منابع بیهوده مصرف نمیشن.
     • تغییر “Key”ها: LaunchedEffect یک یا چند پارامتر می‌گیره که بهشون “کلید” (Keys) میگن (مثلاً LaunchedEffect(myId)).
       • اگر مقدار این کلیدها تغییر کنه، LaunchedEffect قبلی لغو میشه و یک LaunchedEffect جدید با کوروتین جدید دوباره راه‌اندازی میشه.
       • این قابلیت برای وقتی عالیه که می‌خوای کاری رو دوباره انجام بدی چون یه ورودی تغییر کرده. مثلاً اگه ID کاربر تغییر کرده، دوباره اطلاعات کاربری رو از شبکه بگیر.
       • اگر هیچ کلیدی ندی (LaunchedEffect {} یا LaunchedEffect(Unit) یا LaunchedEffect(true))، اون LaunchedEffect فقط یک بار زمانی که برای اولین بار وارد Composition میشه، اجرا میشه و دیگه با Recomposition مجدد اجرا نمیشه، مگر اینکه از Composition خارج و دوباره وارد بشه. (البته استفاده از LaunchedEffect(true) معمولاً توصیه نمیشه، مگر اینکه مطمئن باشی که دقیقاً همین رو می‌خوای و حالت‌های دیگه رو پوشش نمیده.)

مثال :

@Composable
fun UserProfileScreen(userId: String) {
    // ... UI for profile screen ...

    LaunchedEffect(userId) { // کلید رو userId قرار می‌دیم
        // این بلوک کد زمانی اجرا می‌شود که UserProfileScreen وارد Composition شود
        // یا وقتی userId تغییر کند.
        // اگر userId تغییر کند، LaunchedEffect قبلی لغو شده و این دوباره راه‌اندازی می‌شود.

        try {
            val userData = getUserDataFromServer(userId) // یک تابع suspend برای دریافت داده از شبکه
            // بعد از دریافت داده:
            // update UI state to display userData
        } catch (e: Exception) {
            // handle error, show a message
        }
    }
}

در این مثال، getUserDataFromServer یک تابع suspend است که درخواست شبکه رو انجام میده. LaunchedEffect تضمین می‌کنه که:

• این درخواست شبکه در پس‌زمینه انجام بشه (UI فریز نشه).
• وقتی صفحه پروفایل بسته میشه، درخواست لغو بشه.
• اگه userId تغییر کنه (مثلاً از طریق یک دکمه یا لینک در برنامه)، درخواست قدیمی لغو بشه و درخواست جدید برای کاربر جدید ارسال بشه.

از آنجایی که تابع LaunchedEffect خودش یک تابع Composable است، تنها می‌تواند در درون سایر توابع Composable مورد استفاده قرار بگیرد.
اما اگر بخواهی یک Coroutine را خارج از Composable اجرا کنی، ولی در عین حال به ترکیب (Composition) وابسته باشد و به‌صورت خودکار هنگام خارج شدن از ترکیب لغو (Cancel) شود، باید از rememberCoroutineScope استفاده کنی.

همچنین هر زمان که نیاز داشتی کنترل چرخه‌ی زندگی یک یا چند coroutine را به‌صورت دستی در اختیار داشته باشی (مثلاً لغو کردن یک انیمیشن هنگام وقوع یک رویداد کاربری)، می‌توانی از rememberCoroutineScope کمک بگیری.

تابع rememberCoroutineScope یک تابع Composable است که یک شیء CoroutineScope برمی‌گرداند؛ این Scope به همان نقطه‌ای از ترکیب که تابع در آن فراخوانی شده وابسته است. این Scope زمانی که این فراخوانی از ترکیب خارج شود، به‌طور خودکار لغو می‌شود.

در مثال زیر ما یه کوروتین رو در داخل یه تابع ایجاد کرده ایم ، و با استفاده از remember CoroutineScope یه کوروتین د این تابع ایجاد کرده ایم :

@Composable
fun MoviesScreen(snackbarHostState: SnackbarHostState) {

    // Creates a CoroutineScope bound to the MoviesScreen's lifecycle
    val scope = rememberCoroutineScope()

    Scaffold(
        snackbarHost = {
            SnackbarHost(hostState = snackbarHostState)
        }
    ) { contentPadding ->
        Column(Modifier.padding(contentPadding)) {
            Button(
                onClick = {
                    // Create a new coroutine in the event handler to show a snackbar
                    scope.launch {
                        snackbarHostState.showSnackbar("Something happened!")
                    }
                }
            ) {
                Text("Press me")
            }
        }
    }
}

توضیح مثال :

فرض کنید ما یک صفحه به نام MoviesScreen داریم که کاربر می‌تواند بر روی یک دکمه کلیک کند. هدف ما این است که وقتی کاربر دکمه را فشار می‌دهد، یک پیام (Snackbar) به او نشان دهیم.

1. ایجاد دامنه coroutine:
   • در ابتدا، ما از rememberCoroutineScope استفاده می‌کنیم تا یک دامنه coroutine به‌دست آوریم. این به ما این امکان را می‌دهد که coroutine های جدیدی را در این دامنه ایجاد کنیم که به چرخه عمر صفحه ما متصل هستند.
2. ساختار صفحه:
   • ما از Scaffold استفاده می‌کنیم که یک ساختار پایه برای صفحات در Jetpack Compose است و به ما امکان می‌دهد که یک SnackbarHost برای نمایش پیام‌ها داشته باشیم.
3. دکمه برای تعامل:
   • یک دکمه با متن “بزنید من را” داریم. وقتی کاربر روی این دکمه کلیک می‌کند، در واقع یک رویداد رخ می‌دهد.
4. ایجاد coroutine جدید:
   • درون هندلر کلیک دکمه، ما با استفاده از scope.launch یک coroutine جدید ایجاد می‌کنیم. این به ما این امکان را می‌دهد که یک عملیات ناهمگام (مثل نمایش Snackbar) را انجام دهیم.
5. نمایش پیام:
   • درون coroutine، ما از snackbarHostState.showSnackbar استفاده می‌کنیم تا پیام “چیزی اتفاق افتاد!” را نشان دهیم. این پیام به کاربر اعلام می‌کند که یک رویداد خاص رخ داده است.

در نهایت، تمام این مراحل باعث می‌شود که کاربر با فشار دادن دکمه یک پیام را مشاهده کند، و هنگامی که صفحه بسته می‌شود، تمام coroutine های مرتبط با آن به‌طور خودکار لغو می‌شوند.

شما می‌توانید به تعداد دلخواه coroutine ایجاد کنید. هر بار که scope.launch را صدا می‌زنید، یک coroutine جدید راه‌اندازی می‌شود. اما باید به یاد داشته باشید که این coroutine ها همگی به دامنه‌ای که با rememberCoroutineScope ایجاد شده‌اند متصل هستند و زمانی که این دامنه لغو می‌شود (یعنی زمانی که composable از ترکیب خارج می‌شود)، همه coroutine های مربوط به آن هم لغو می‌شوند. بنابراین، از نظر تعداد محدودیتی وجود ندارد، اما باید به چرخه عمر و منابع استفاده شده توجه کنید.

فرض کنید ما یک صفحه داریم که اطلاعات فیلم‌ها را از یک API دریافت می‌کند. در این سناریو، وقتی کاربر بر روی یک دکمه کلیک می‌کند، داده‌ها از اینترنت بارگذاری می‌شوند و در صورت موفقیت، نمایش داده می‌شوند. در اینجا می‌توانیم از rememberCoroutineScope استفاده کنیم تا coroutine هایی را مدیریت کنیم که داده‌ها را بارگذاری می‌کنند. این هندلر این امکان رو به ما میدهد که در تابع های که کاموزیبل نیستند ، Side Effect کنترل کنید .

این هندلر ، استیت State های خارجی را به استیت کامپوز تبدیل میکند .

حالا یه مقدار خودمونی تر توضیح میدم :

اول از همه، produceState چیه؟

produceState یه پل هست بین جهان خارجی (مثل دیتا از اینترنت، دیتابیس، یا حتی Sensorها) و جهان Compose State.

تو Compose هر چی که UI تغییر کنه باید از State بیاد. اما مثلاً فرض کن:

• یه دیتا می‌خوای از سرور بیاری.
• این دیتا خودش از دنیای بیرون میاد و به شکل suspend function هست.
• باید این دیتا رو به Compose بدی تا UI باهاش تغییر کنه.

اینجاست که produceState به کارت میاد.

خب ، اگه از این استفاده نکنیم چی میشه ؟

سوال خیلی مهمیه.

تو می‌تونی با LaunchedEffect یا rememberCoroutineScope هم دیتا بیاری و بعد یه متغیر mutableStateOf رو به‌روز کنی. درسته؟

اما:

• این حالت جدا کردن لاجیک خیلی تمیز نیست.
• مشکل Lifecycle پیدا می‌کنی (مثلاً وقتی key تغییر کرد چی؟ ری‌استارت میشه؟).
• دستی باید مدیریت کنی کی coroutine ری‌استارت بشه.
• در تست و خوانایی کد هم دردسر داری.

produceState همه اینا رو خودش حل می‌کنه.

• Coroutine خودش داره.
• وقتی key1 تغییر کنه خودش ری‌استارت میشه.
• State<T> مستقیم تولید می‌کنه.
• نیازی به متغیر اضافی یا مدیریت Scope نداری.

یه مثال واقعی که بدون produceState دردسر داره:

فرض کن می‌خوایم یه عدد تصادفی از سرور بگیریم (شبیه‌سازی شده با delay) و توی UI نشون بدیم.

import androidx.compose.foundation.layout.*

import androidx.compose.material3.*

import androidx.compose.runtime.*

import androidx.compose.ui.Modifier

import androidx.compose.ui.unit.dp

import kotlinx.coroutines.delay




@Composable

fun RandomNumberScreen(userId: String) {

    val numberState = produceState<Int?>(initialValue = null, key1 = userId) {

        delay(1000) // شبیه سازی دانلود عدد از سرور

        value = (1..100).random() // عدد تصادفی

    }




    Column(modifier = Modifier.padding(16.dp)) {

        Text(text = "User ID: $userId")




        if (numberState.value == null) {

            CircularProgressIndicator()

        } else {

            Text(text = "Random Number: ${numberState.value}")

        }

    }

}

 توضیح مثال :

از طرفی در مثال بالا ما میتونستیم از LuanchEffect و mutableStateOF استفاده کنیم  اما :
سوال:

فرق اصلی produceState با LaunchedEffect + mutableStateOf چیه؟

۱) وقتی از LaunchedEffect استفاده می‌کنی:

تو باید دستی یه State تعریف کنی:

var number by remember { mutableStateOf<Int?>(null) }




LaunchedEffect(userId) {

    delay(1000)

    number = (1..100).random()

}

یعنی ۲ تا بخش جدا نیاز داری:

1. تعریف state (remember { mutableStateOf() })
2. به‌روزرسانی اون state داخل LaunchedEffect

۲) ولی وقتی از produceState استفاده می‌کنی:

val numberState = produceState<Int?>(initialValue = null, key1 = userId) {

    delay(1000)

    value = (1..100).random()

}

اینجا این دو مرحله یکی شده:

• هم state ساخته می‌شه.
• هم در همون بلاک مقداردهی و به‌روزرسانی می‌شه.

🔍 در واقع produceState خودش داره mutableStateOf + LaunchedEffect با هم انجام میده.

✨ به زبان ساده:

🎯 چرا جمله‌ی «باید دستی بسازی» توی LaunchedEffect درسته؟

چون اونجا کامپوز خودش برات State نمی‌سازه. تو باید بنویسی:

var myState by remember { mutableStateOf(...) }

اما در produceState خودش می‌گه:
«بیا این State آماده، من برات ساختم. فقط بگو value چی باشه.»

اگه بخوایم از یه زاویه دیگه ای نگاه کنیم  :

ما در این جا :

val numberState = produceState<Int?>(initialValue = null, key1 = userId) {

    delay(1000)

    value = (1..100).random()

}

مگه من این state رو به صورت دستی نمیسازیم ؟

پاسخ : نه. چون در produceState تو فقط داری initialValue می‌دی. خود produceState پشت صحنه این رو برات به شکل State آماده می‌کنه.
ولی در LaunchedEffect خودت باید mutableStateOf درست کنی.

🔥 مثال تصویری برای مقایسه:

یه نتیجه گیری به صورت خلاصه :

produceState = خودم برات state می‌سازم، تو فقط بگو value چی باشه.

LaunchedEffect = خودت باید state رو بسازی، خودت هم باید مقدار بدی.

rememberUpdatedState یک تابع در Jetpack Compose است که برای ارجاع به یک مقدار در یک اثر (Effect) که نباید در صورت تغییر مقدار، دوباره راه‌اندازی (restart) شود، استفاده می‌شود.

عملکرد LaunchedEffect

• LaunchedEffect: این تابع یک اثر (Effect) را در کامپوزابل‌ها تعریف می‌کند که به محض تغییر یکی از پارامترهای کلیدی (key parameters) آن، دوباره راه‌اندازی می‌شود. این ویژگی می‌تواند در مواردی که نیاز به نگهداری یک اثر Effect طولانی‌مدت است، مشکل‌ساز شود، زیرا ممکن است راه‌اندازی مجدد اثر هزینه‌بر یا غیرممکن باشد.

نیاز به rememberUpdatedState

• در برخی از موقعیت‌ها، شما ممکن است بخواهید یک مقدار را در اثر Effect خود ذخیره کنید که اگر تغییر کند، اثر Effect نباید دوباره راه‌اندازی شود. در این شرایط، نیاز به استفاده از rememberUpdatedState دارید تا یک ارجاع به این مقدار ایجاد کنید که می‌تواند ذخیره و به‌روزرسانی شود.

توضیح ساده تر :

وقتی شما در Jetpack Compose یک انیمیشن یا عملی را اجرا می‌کنید، اگر وضعیت یا پارامترهای آن تغییر کنند، آن عمل دوباره اجرا می‌شود. این ممکن است باعث مصرف منابع بیشتر و کندی برنامه شود.

حالا چطور rememberUpdatedState کمک می‌کند؟

با استفاده از rememberUpdatedState، می‌توانید یک مقدار (مثل یک تابع یا وضعیت) را ذخیره کنید. اگر این مقدار تغییر کند، اثر شما دوباره اجرا نمی‌شود. در عوض، آن اثر به آخرین مقدار دسترسی دارد و به‌طور خودکار به روز می‌شود.

مثال ساده

فرض کنید شما یک انیمیشن دارید که وقتی کاربر روی یک دکمه کلیک می‌کند، شروع به کار می‌کند و به مدت ۵ ثانیه ادامه دارد. اگر کاربر دوباره روی دکمه کلیک کند، می‌خواهید انیمیشن دوباره شروع نشود، اما فقط به آخرین وضعیت (مثل زمان باقی‌مانده) دسترسی داشته باشید.

در اینجا rememberUpdatedState به شما کمک می‌کند تا انیمیشن را فقط یک بار اجرا کنید و بدون نیاز به راه‌اندازی مجدد، به وضعیت آن دسترسی داشته باشید.

کد مثال

@Composable
fun MyAnimation() {
    var isAnimating by remember { mutableStateOf(false) }

    // استفاده از rememberUpdatedState برای به روزرسانی تابع انیمیشن
    val currentAnimationState = rememberUpdatedState(isAnimating)

    LaunchedEffect(currentAnimationState.value) {
        if (currentAnimationState.value) {
            // شروع انیمیشن
            delay(5000) // انیمیشن به مدت ۵ ثانیه ادامه دارد
            isAnimating = false // بعد از ۵ ثانیه، انیمیشن متوقف می‌شود
        }
    }

    Button(onClick = { isAnimating = true }) {
        Text("Start Animation")
    }
}

در این مثال، وقتی دکمه “Start Animation” کلیک می‌شود، انیمیشن شروع می‌شود و بعد از ۵ ثانیه به‌طور خودکار متوقف می‌شود. با استفاده از rememberUpdatedState، اگر isAnimating تغییر کند، اثر دوباره اجرا نمی‌شود و به‌طور صحیح به روز رسانی می‌شود.

این هندلر ، به موضوع این بحث شباهت اسمی دارد  ، که به این دلیل است که در داخل تابع کامپوزیبل زمانی که ما بخواهیم  ، کاری یا عملی را در تابع Composable بعد از هر Recompose انجام بدیم ، که این کار ، یک نوع کنترل اثر جانبی است که به صورت مدیریت شده انجام میگیرد ، اما کارهای که سبک هستند ، مثلاً: لاگ گرفتن، کار با سرویس‌های بیرونی API، دیتابیس، آنالیتیکس، GPS، بلوتوث و  . . .

تعریف: SideEffect یک کامپوزابل (Composable) در Jetpack Compose است که برای انتشار وضعیت Compose به کدهایی که تحت مدیریت Compose نیستند، ❓ این یعنی چی ؟  استفاده می‌شود. این امکان به شما اجازه می‌دهد که اثرات جانبی را در پاسخ به تغییرات وضعیت Compose مدیریت کنید.

در Jetpack Compose،‌ وقتی می‌خوای کاری انجام بدی که:

1. خارج از دنیای Compose باشه (مثلاً: پرینت در لاگ، ارسال به سرور، به‌روز کردن یک API خارجی مثل Analytics یا Map و …)،
2. اما این کار فقط زمانی انجام بشه که این کامپوزابل اصلی (و نه زیرکامپوزابل‌ها) دوباره رسم (recompose) بشه،

مثال کاربردی

به عنوان مثال، فرض کنید کتابخانه آنالیز شما به شما این امکان را می‌دهد که با پیوست کردن متاداده‌های سفارشی (مانند “ویژگی‌های کاربر”) به همه رویدادهای آنالیز بعدی، جمعیت کاربران خود را تقسیم‌بندی کنید. برای اینکه نوع کاربر فعلی را به کتابخانه آنالیز خود منتقل کنید، می‌توانید از SideEffect استفاده کنید تا مقدار آن را به‌روزرسانی کنید.

چرا به درد می‌خوره؟

مثلاً:

• می‌خوای هر بار صفحه لود می‌شه به آنالیتیکس بگی.
• می‌خوای یه مقدار خاص رو به یه API خارجی (که Compose نمی‌شناسه) بفرستی.
• می‌خوای هر بار این بخش از صفحه کشیده شد یه لاگ بگیری.

✅ مثال خیلی ساده:

@Composable
fun SimpleScreen(userName: String) {
    SideEffect {
        println("این صفحه دوباره رسم شد برای کاربر: $userName")
    }

    Text(text = "سلام $userName")
}

کی نباید از SideEffect استفاده کنیم؟

وقتی:

• می‌خوای کاری زمان‌بر (suspend) انجام بدی → بهتره از LaunchedEffect استفاده کنی.
• می‌خوای State یا UI تغییر بدی → اصلاً نباید توی SideEffect انجام بدی.

در Jetpack Compose، زمانی که می‌خواهیم یک اثر جانبی (Side Effect) اجرا کنیم که نیاز به تمیزکاری (Cleanup) دارد،«یعنی از منابع سیستم که استفاده کردیم مانند استفاده از رم و سی پی یو ، باید این ها رو لغو کنیم»  از DisposableEffect استفاده می‌کنیم. این نوع از افکت زمانی مناسب است که کامپوزابل از کامپوزیشن خارج شود «منظور این که ما با یه دنیایی دیگه سر کار داریم ، مانند این که ما در حال استفاده از کوروتین یا استفاده از کاموزیبل هستیم ، که این ها دوتا دنیا، کانتکس ، بخش جداگانه هستند ، و زمانی که شما از تایمر استفاده میکنید ، این تایمر خارج از کامپوز یا کوروتین است ، شروع شدن و با پایان اومدن این ها در حوزه اختیار کامپوز نیست ، که این ها رو باید دستی مدیریت کنیم »  یا کلیدهای افکت تغییر کند و لازم باشد منابع یا عملیات‌هایی که راه‌اندازی کرده‌ایم، به درستی متوقف یا آزاد شوند.

چه زمانی از DisposableEffect استفاده می‌کنیم؟

وقتی که:

• به یک منبع خارجی وصل می‌شویم که باید در زمان مناسب آزاد شود.
• در حال ثبت و لغو Listener هستیم (مثل سنسور گوشی، موقعیت مکانی، یا Broadcast Receiver).
• نیاز داریم که هنگام تغییر کلیدها یا نابود شدن کامپوزابل منابع پاک شوند یا عملیاتی متوقف شود.

مثال‌های دنیای واقعی برای استفاده از DisposableEffect:

1. ثبت و لغو Listener برای رویدادهای Lifecycle:
   فرض کن می‌خواهی رویدادهای Lifecycle (مثل onStart, onStop) را برای یک صفحه شنود کنی. در این صورت باید یک LifecycleObserver بسازی و در DisposableEffect آن را ثبت و در زمان خروج کامپوزابل آن را لغو کنی.
2. WebSocket یا اتصال به سرور:
   زمانی که یک WebSocket یا اتصال شبکه‌ای را باز می‌کنی، لازم است هنگام خروج از صفحه یا تغییر کلیدها، اتصال را ببندی تا منابع هدر نروند.
3. سنسورها (SensorListener):
   وقتی از سنسورهایی مثل شتاب‌سنج یا ژیروسکوپ استفاده می‌کنی، باید هنگام خروج از صفحه، Listener آن‌ها را غیرفعال کنی.
4. تایمر (Timer):
   اگر از تایمرهای کلاسیک جاوا مثل Timer استفاده کنی (و نه coroutine-based delay)، باید مطمئن شوی که تایمر به درستی متوقف می‌شود.

مثال تایمر با DisposableEffect:

@Composable

fun TimerComponent() {

    var time by remember { mutableStateOf(0) }




    DisposableEffect(Unit) {

        val timer = Timer()

        timer.scheduleAtFixedRate(object : TimerTask() {

            override fun run() {

                time++

            }

        }, 1000, 1000)




        onDispose {

            timer.cancel() // متوقف کردن تایمر در زمان خروج کامپوزابل

        }

    }




    Text("Time: $time seconds")

}

در این مثال:

• وقتی کامپوزابل ساخته می‌شود (DisposableEffect اجرا می‌شود)، تایمر شروع به کار می‌کند.
• وقتی کامپوزابل نابود می‌شود یا کلیدها تغییر می‌کنند، onDispose اجرا شده و تایمر متوقف می‌شود.

چرا LaunchedEffect مناسب این کار نیست؟

اگر از LaunchedEffect استفاده می‌کردیم، امکان صدا زدن timer.cancel() را نداشتیم، چون LaunchedEffect مخصوص اجرای coroutine است، نه مدیریت منابع خارجی جاوا مثل Timer. در نتیجه اگر تایمر رو در LaunchedEffect می‌ساختیم، بعد از نابودی کامپوزابل، تایمر همچنان به کار خود ادامه می‌داد و باعث نشت حافظه (Memory Leak) می‌شد.

خلاصه:

نکته مهم:

اگر از Coroutine استفاده کنی (مثلاً با delay())، خود LaunchedEffect به صورت خودکار cancel می‌شود و نیازی به تمیزکاری دستی نیست. اما اگر با منابع خارجی کار داری، حتماً از DisposableEffect استفاده کن.

در Compose، گاهی اوقات لازم است که یک وضعیت جدید ایجاد کنیم که از وضعیت‌های موجود دیگر مشتق (derived) شده باشد. اما ممکن است نخواهیم این وضعیت جدید هر بار که کامپوز بازترکیب (recompose) می‌شود، دوباره محاسبه شود، زیرا این کار می‌تواند عملکرد اپلیکیشن را کاهش دهد.

اینجاست که derivedStateOf به کمک ما می‌آید. این ابزار کمک می‌کند وضعیت جدید فقط زمانی محاسبه شود که وضعیت‌های اصلی (که بر اساس آن ساخته شده) تغییر کنند. این کار باعث بهبود عملکرد می‌شود و از محاسبات اضافی جلوگیری می‌کند.

کاربرد اصلی derivedStateOf:

1. وقتی می‌خواهیم از وضعیت‌های موجود یک وضعیت جدید بسازیم.
2. وضعیت جدید فقط زمانی محاسبه شود که وضعیت‌های اصلی تغییر کنند.
3. این کار باعث می‌شود بازترکیب‌های غیرضروری حذف شوند و اپلیکیشن سریع‌تر اجرا شود.

مثال‌ها:

مثال 1: محاسبه مجموع اعداد

فرض کنید لیستی از اعداد داریم و می‌خواهیم مجموع این اعداد را نمایش دهیم. مجموع فقط وقتی باید محاسبه شود که لیست اعداد تغییر کند.

@Composable
fun DerivedStateExample(numbers: List<Int>) {
    val totalSum by remember {
        derivedStateOf { numbers.sum() }
    }
    Text("Total Sum: $totalSum")
}

توضیح ساده:

• با استفاده از derivedStateOf، مجموع اعداد (totalSum) فقط وقتی دوباره محاسبه می‌شود که لیست numbers تغییر کند. این باعث می‌شود محاسبات اضافی حذف شوند.

مثال 2: فیلتر کردن لیست بر اساس جستجو

فرض کنید لیستی از کلمات داریم و کاربر یک عبارت جستجو وارد می‌کند. می‌خواهیم لیست فیلتر شده فقط زمانی محاسبه شود که عبارت جستجو یا لیست اصلی تغییر کند.

توضیح ساده:

• با استفاده از derivedStateOf، لیست فیلتر شده (filteredItems) فقط وقتی دوباره محاسبه می‌شود که عبارت جستجو (query) یا لیست اصلی (items) تغییر کنند.
• اگر عبارت جستجو خالی باشد، لیست اصلی نمایش داده می‌شود. اگر جستجو انجام شود، لیست فیلتر می‌شود.

نکات مهم:

1. دلیل استفاده از derivedStateOf:
   • اگر وضعیت مشتق‌شده (مانند مجموع یا لیست فیلتر شده) هر بار بدون تغییر وضعیت اصلی محاسبه شود، باعث بازترکیب‌های غیرضروری و کاهش عملکرد اپلیکیشن می‌شود.
   • با استفاده از derivedStateOf، این محاسبات فقط زمانی انجام می‌شوند که لازم باشد.
2. کاربرد در لیست‌های بزرگ:
   • وقتی لیست‌ها بزرگ هستند، استفاده از derivedStateOf باعث می‌شود فیلتر کردن یا پردازش لیست بهینه‌تر انجام شود.

نتیجه‌گیری:

derivedStateOf یک ابزار کاربردی برای بهینه‌سازی عملکرد است. این ابزار زمانی استفاده می‌شود که بخواهید از وضعیت‌های موجود وضعیت جدید بسازید، اما فقط در مواقع ضروری آن وضعیت جدید دوباره محاسبه شود. با این روش، اپلیکیشن شما سریع‌تر و کارآمدتر اجرا خواهد شد.

   
@Composable
fun FilteredListExample(items: List<String>) {
    var query by remember { mutableStateOf("") }

    // ساخت وضعیت مشتق‌شده بر اساس جستجو
    val filteredItems by remember {
        derivedStateOf {
            if (query.isEmpty()) {
                items
            } else {
                items.filter { it.contains(query, ignoreCase = true) }
            }
        }
    }

    Column(modifier = Modifier.padding(16.dp)) {
        TextField(
            value = query,
            onValueChange = { query = it },
            label = { Text("Search") }
        )
        Spacer(modifier = Modifier.height(8.dp))
        Text("Filtered Items:", style = MaterialTheme.typography.h6)
        Spacer(modifier = Modifier.height(8.dp))

        // نمایش لیست فیلتر شده
        LazyColumn {
            items(filteredItems) { item ->
                Text(item, modifier = Modifier.padding(vertical = 4.dp))
            }
        }
    }
}

در ابتدای کار برای این که ، مفهوم خوب متوجه بشیم نیاز داریم ، که مفهوم مشتق رو بدونیم :

✅ مشتق‌شده یعنی چی؟

مشتق‌شده یعنی:

از روی یه چیز دیگه محاسبه شده یا نتیجه‌گیری شده باشه

🟢 مثال ساده‌ی روزمره:

فرض کن یه فروشگاه داری.

• قیمت واحد کالا = 10 هزار تومان
• تعداد خرید شده = 3

خب حالا:

• جمع کل = قیمت × تعداد = 30 هزار تومان

اینجا جمع کل یه مقدار مشتق‌شده از قیمت و تعداد هست.
یعنی خودش مستقل نیست، بلکه بر اساس دو تا داده دیگه محاسبه شده.

🟦 حالا در Compose چی میشه؟

فرض کن:

val count = remember { mutableStateOf(3) }

و یه مقدار جدید تعریف می‌کنی که بگه آیا count بیشتر از 5 هست یا نه:

val isHigh = count.value > 5

اینجا isHigh یک مقدار مشتق‌شده از count هست.
یعنی خودش state نیست، ولی وابسته به یه state دیگه است و با تغییر اون دوباره محاسبه میشه.

خب کجا این مفهوم مشتق استفاده میشه  :

🧩 اول بریم سراغ مشکل اصلی:

در Jetpack Compose وقتی یه @Composable داره از یه state استفاده می‌کنه، هر بار که اون state تغییر کنه، اون Composable دوباره اجرا می‌شه (یعنی بازترکیب یا Recompose میشه).
حالا فرض کن یه state داریم که خیلی زیاد تغییر می‌کنه، ولی ما فقط در بعضی از اون تغییرات واقعاً نیاز به بروزرسانی UI داریم. اینجا اگه همه‌ش Recompose بشه، باعث می‌شه کارایی (performance) پایین بیاد.

💡 راه‌حل چیه؟ derivedStateOf

حالا ما با derivedStateOf می‌تونیم بگیم:

یه مقدار مشتق‌شده از state حساب کن، ولی فقط وقتی مقدار نهایی اون فرق کرد، Recompose انجام بده.

✅ مثال ساده: دکمه «برو بالا»

فرض کن یه لیست داریم و یه دکمه‌ی “scroll to top”. ما می‌خوایم این دکمه فقط وقتی نشون داده بشه که کاربر اسکرول کرده پایین.

می‌تونستیم اینجوری بنویسیم:

val showButton = remember { mutableStateOf(false) }

LaunchedEffect(listState.firstVisibleItemIndex) {
showButton.value = (listState.firstVisibleItemIndex > 0)
}

این روش جواب می‌ده، ولی ممکنه بی‌خودی Recompose زیاد بشه.

😎 روش بهتر: derivedStateOf

val showButton by remember {

    derivedStateOf { listState.firstVisibleItemIndex > 0 }

}

حالا:

• هر بار که کاربر اسکرول کنه، مقدار listState.firstVisibleItemIndex آپدیت میشه.
• ولی فقط وقتی مقدار showButton از false به true یا برعکس تغییر کنه، کامپوز دوباره اجرا میشه.
• این باعث میشه تغییرات غیرضروری نادیده گرفته بشن → کد سریع‌تر و بهینه‌تر!

🧠 خلاصه ساده:

derivedStateOf مثل یه فیلتر هوشمند عمل می‌کنه:

فقط وقتی مقدار واقعا تغییر کرد، برو ترکیب مجدد انجام بده!

🔑 نکته پایانی درباره «کلیدهای پایدار» (stable keys):

اگه توی لیست‌ها (LazyColumn، LazyRow و…) از کلیدهای منحصربه‌فرد و ثابت استفاده نکنی، Compose ممکنه فکر کنه آیتم‌ها عوض شدن و بی‌دلیل همه‌چیز رو بازترکیب کنه.

✅ پس همیشه بنویس:

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

   ...

}

تا به اینجای کار داده های ما ، که به صورت State شناخته میشد ، به صورت تکی بود ، اگر این داده های به صورت لیست باشند چطور باید مدیریت شوند که کامپوز دوباره کاری انجام ندهد .

در Jetpack Compose، SnapshotStateList و SnapshotStateMap انواع خاصی هستند که برای مدیریت کارآمد مجموعه‌های قابل تغییر ارائه شده‌اند. این انواع اطمینان می‌دهند که تغییرات در مجموعه‌ها به گونه‌ای ردیابی می‌شوند که به Compose اجازه می‌دهد فقط بخش‌هایی از رابط کاربری را که تحت تأثیر آن تغییرات قرار دارند، دوباره کامپوز کند. این می‌تواند عملکرد را به طور قابل توجهی بهبود بخشد و مدیریت حالت را ساده‌تر کند.

ایجاد SnapshotStateList و SnapshotStateMap

این مجموعه‌ها با استفاده از توابع کمکی mutableStateListOf و mutableStateMapOf ایجاد می‌شوند. این توابع به ترتیب نمونه‌هایی از SnapshotStateList و SnapshotStateMap را ایجاد می‌کنند.

val items = mutableStateListOf("سیب", "موز", "پرتقال")
val userMap = mutableStateMapOf("کاربر1" to "آلیس", "کاربر2" to "باب")

مثال با SnapshotStateList

در اینجا مثالی آورده شده است که نحوه استفاده از SnapshotStateList را در یک رابط کاربری Jetpack Compose نشان می‌دهد:

       

@Composable

fun ShoppingList() {

    val items = remember { mutableStateListOf("شیر", "تخم مرغ", "نان") }




    Column {

        items.forEach { item ->

            Text(item)

        }

        Button(onClick = { items.add("کره") }) {

            Text("اضافه کردن کره")

        }

    }

}

در این مثال:

• ما با استفاده از mutableStateListOf یک SnapshotStateList ایجاد می‌کنیم.
• لیست در یک Column نمایش داده می‌شود و هر آیتم به عنوان یک کامپوننت Text رندر می‌شود.
• یک دکمه برای اضافه کردن یک آیتم جدید (“کره”) به لیست ارائه شده است. هنگامی که روی این دکمه کلیک شود، لیست به روز می‌شود و Compose به طور خودکار یک بازترکیب را برای نشان دادن حالت جدید فعال می‌کند.

مثال با SnapshotStateMap

حالا بیایید به مثالی با استفاده از SnapshotStateMap نگاهی بیندازیم:“`kotlin @Composable fun UserProfileMap() { val userMap = remember { mutableStateMapOf(“کاربر1” to “جان”, “کاربر2” to “جین”) }

Column {

    userMap.forEach { (key, name) ->

        Text("$key: $name")

    }

    Button(onClick = { userMap["کاربر3"] = "آلیس" }) {

        Text("اضافه کردن آلیس")

    }

}

}

در این مثال:

*   ما با استفاده از `mutableStateMapOf` یک `SnapshotStateMap` ایجاد می‌کنیم.

*   نقشه در یک `Column` نمایش داده می‌شود، با هر جفت کلید-مقدار به عنوان یک کامپوننت `Text` رندر می‌شود.

*   یک دکمه برای اضافه کردن یک ورودی جدید (“کاربر3” به “آلیس”) به نقشه ارائه شده است. هنگامی که روی دکمه کلیک شود، نقشه به روز می‌شود و Compose به طور خودکار یک بازترکیب را برای نمایش ورودی جدید فعال می‌کند.