Jetpack Compose-এর Side Effects

 

🌀 Jetpack Compose-এর Side Effects: মগজ-বন্ধু ব্যাখ্যা (Brain-Friendly) 🚀

Jetpack Compose declarative UI ফ্রেমওয়ার্ক, যার মানে হলো UI যখন দরকার তখনই পুনরায় আঁকা (Recompose) করা হয়। কিন্তু সবসময় UI-তে পরিবর্তন আসতে পারে না, কিছু কাজ UI-এর বাইরে করতে হয়, যেমন:

✅ Coroutine চালানো (যেমন API Call বা Delay করা)
✅ Animation শুরু করা
✅ MediaPlayer চালানো ও বন্ধ করা
✅ Back Press বা Configuration Change হ্যান্ডেল করা

এমন কাজগুলোকেই Side Effects বলা হয়, এবং Jetpack Compose-এ এগুলো করার জন্য কিছু নির্দিষ্ট API আছে।

---

🎯 ১. LaunchedEffect → Suspend Function বা Coroutine চালানোর জন্য

🧐 কবে লাগবে?
যখন UI প্রথমবার লোড হবে, তখন যদি কোন network request, database fetch, অথবা delay করা দরকার হয়, তাহলে LaunchedEffect ব্যবহার করা হয়।

🔹 ধরুন, আপনি একটা Counter Timer বানাতে চান, যা প্রতি ১ সেকেন্ডে আপডেট হবে।

@Composable
fun TimerScreen() {
    var time by remember { mutableStateOf(0) }

    LaunchedEffect(Unit) { // Runs only once
        while (true) {
            delay(1000L)
            time++
        }
    }

    Text("⏳ Time: $time seconds")
}

✅ Recomposition হলেও Coroutine নতুন করে শুরু হবে না!
✅ Composable destroy হলে Coroutine ও বন্ধ হয়ে যাবে!

---

🎯 ২. rememberCoroutineScope → UI থেকে Coroutine চালানোর জন্য

🧐 কবে লাগবে?
যখন Button ক্লিক করলে Coroutine চালাতে হবে, কিন্তু LaunchedEffect দরকার নেই, তখন rememberCoroutineScope ব্যবহার করা হয়।

🔹 ধরুন, আপনি Login Button ক্লিক করলে API Call করবেন।

@Composable
fun LoginScreen() {
    val coroutineScope = rememberCoroutineScope()

    Button(onClick = {
        coroutineScope.launch {
            loginUser() // suspend function
        }
    }) {
        Text("🔑 Login")
    }
}

✅ Button চাপলে Coroutine চলবে, কিন্তু Composable destroy হলে Task বন্ধ হবে না।
✅ এই Coroutine চলতে থাকবে, ViewModel-এর মতো নয়!

---

🎯 ৩. SideEffect → যখন প্রতি Recomposition-এ কিছু করতে হয়

🧐 কবে লাগবে?
যখন Composable প্রতিবার Recompose হলে কিছু আপডেট করতে চান, তখন SideEffect ব্যবহার করা হয়।

🔹 ধরুন, আপনি প্রতি Recomposition-এ একটি লোগ লিখতে চান।

@Composable
fun MyComposable(count: Int) {
    SideEffect {
        Log.d("MyComposable", "Count updated: $count")
    }
    Text("Count: $count")
}

✅ প্রতি Recomposition-এ লগ দেখাবে!

---

🎯 ৪. DisposableEffect → Clean-up করা প্রয়োজন হলে

🧐 কবে লাগবে?
যখন Composable destroy হলে কিছু বন্ধ করতে চান, যেমন MediaPlayer বা Sensor বন্ধ করা।

🔹 ধরুন, আপনি একটি Music Player চালু করতে চান, এবং Composable Destroy হলে Player বন্ধ হবে।

@Composable
fun MediaPlayerScreen() {
    DisposableEffect(Unit) {
        val player = MediaPlayer()
        player.start() // 🎵 Start playing

        onDispose {
            player.release() // 🛑 Stop playing when Composable is removed
        }
    }
}

✅ Composable destroy হলে onDispose রান হবে এবং মেমোরি লিক হবে না!

---

🎯 ৫. produceState → Suspend Function থেকে State তৈরি করা

🧐 কবে লাগবে?
যখন Coroutine থেকে UI-এর জন্য Data Fetch করতে হয়, তখন produceState ব্যবহার করা হয়।

🔹 ধরুন, আপনি API থেকে ব্যবহারকারীর নাম আনতে চান।

@Composable
fun UserNameScreen(userId: String) {
    val userName by produceState(initialValue = "Loading...", userId) {
        value = fetchUserName(userId) // suspend function
    }

    Text("👤 User: $userName")
}

✅ Composable destroy হলে Coroutine বন্ধ হয়ে যাবে!

---

🎯 ৬. rememberUpdatedState → Callback-এর আপডেটেড মান রাখা

🧐 কবে লাগবে?
যখন Composable-এর মধ্যে Callback function আপডেট রাখতে হয়, তখন rememberUpdatedState ব্যবহার করা হয়।

🔹 ধরুন, আপনি একটি Timer বানিয়েছেন, যা প্রতি ১ সেকেন্ডে একটি Callback রান করবে।

@Composable
fun Timer(callback: () -> Unit) {
    val updatedCallback by rememberUpdatedState(callback)

    LaunchedEffect(Unit) {
        while (true) {
            delay(1000L)
            updatedCallback()
        }
    }
}

✅ Composable Recompose হলেও Callback হারাবে না!

---

💡 সারসংক্ষেপ (Summary)

API	কবে ব্যবহার করবেন?
LaunchedEffect	Suspend function চালানোর জন্য
rememberCoroutineScope	UI থেকে Coroutine চালানোর জন্য
SideEffect	প্রতি Recomposition-এ কিছু করার জন্য
DisposableEffect	Cleanup করার জন্য (e.g., MediaPlayer বন্ধ করা)
produceState	Suspend function থেকে State তৈরি করতে
rememberUpdatedState	Callback function আপডেট রাখতে

---

🚀 শেষ কথা

Jetpack Compose-এ Side Effects সঠিকভাবে ব্যাবহার করলে আপনার অ্যাপ হবে performant, lifecycle-aware, এবং memory-efficient! 🏆

✅ LaunchedEffect → Coroutine চালান (একবারই রান হবে)
✅ rememberCoroutineScope → Button ক্লিক হলে Coroutine চালান
✅ SideEffect → প্রতি Recomposition-এ কিছু করুন
✅ DisposableEffect → Destroy হলে Cleanup করুন
✅ produceState → Suspend Function থেকে State তৈরি করুন
✅ rememberUpdatedState → Callback-এর Updated মান রাখুন

এখন আপনি Jetpack Compose-এর Side Effects সম্পর্কে পুরোপুরি প্রস্তুত! 🚀🔥