Compose Chronicles: The Cleanup Crew — Keeping Your Compositions Tidy with DisposableEffect 🧹

Excited to delve deeper into Side Effects? Welcome back to the Compose Chronicles! 👋 You can read up on older articles:

Decoding Side Effects: A Journey Through LaunchedEffect In Jetpack Compose 🚀

Compose Chronicles: Exploring The rememberCoroutineScope Superpower 💪

Compose Chronicles: Don’t Forget Your State! rememberUpdatedState To The Rescue 🚀🦸‍♂️

Compositions getting messy? Fear not! Today in the Compose Chronicles, DisposableEffect comes to the rescue 🦸‍♂️. Here’s what you need to know first:

What is DisposableEffect?

Manages tasks that need to start when a part of your UI appears on screen (enters composition) and cleans up those tasks when it disappears (leaves composition).

Think of DisposableEffect like a caretaker who tidies up a room when someone enters and then cleans it up when they leave. When a composable enters the composition, it’s like someone entering the room, and the caretaker (the DisposableEffect) takes care of any setup tasks.

When the composable leaves, it’s like the person exiting the room, and the caretaker cleans up any mess or resources associated with that composable.

So, DisposableEffect ensures that the room (or the composition) stays neat and tidy throughout its lifecycle.

What does DisposableEffect look like? 👀

DisposableEffect here takes 2 parameters:

key1: This parameter controls when the effect should run again. If the value of key changes, the effect block inside DisposableEffect will be re-executed.

effect: This is a block of code that runs a specific action when the composable appears on screen (enters composition). It receives a special helper called DisposableEffectScope that lets you do things like cleaning up with onDispose when the composable disappears.

remember(key1) { DisposableEffectImpl(effect) }: This line creates and remembers an instance of DisposableEffectImpl, passing the effect lambda to it. DisposableEffectImpl is a class that manages the execution and cleanup of the effect.

The remember function ensures that DisposableEffectImpl persists across recompositions of the composable but is recomputed if the key1 parameter changes.

DisposableEffectScope and DisposableEffectResult

The DisposableEffectScope typically includes functions like onDispose which you can use to specify cleanup actions that should be performed when the effect is removed from the composition.

This function returns a DisposableEffectResult which is a required return type of the effect block in DisposableEffect.

DisposasbleEffect in Action 💪

We have a simple composable called SomeScreen, it simply has a button which when is clicked increases count. We also have DisposableEffect setup here.

When the app is run SomeScreen composable is composed and displayed within the activity’s layout.

DisposableEffect is invoked and lifecycleObserver is setup to monitor the lifecycle events of the activity associated with the lifecycleOwner and is added to the activity’s lifecycle. When a lifecycle event occurs it is logged.

SomeScreen.kt Log

If we observe Logcat, we see that OnCreate, OnStart, and OnResume events are logged. When the Increase Count button is clicked:

• count is increased.
• SomeScreen gets recomposed.
• DisposableEffect’s key has changed (count), the effect block gets re-executed.
• Before the above happens, onDispose gets triggered, removing the lifecycleObserver from the activity’s lifecycle (we see onDispose is triggered as it is logged in the Logcat).
• The lifecycleObserver is then re-initialized and added to the activity’s lifecycle like before.
• OnCreate, OnStart, and OnResume events are logged once more.
• When we minimize the app, the OnPause and OnStop events are logged.

That there is the ability of the clean up crew — DisposableEffect! 💪🚀!!

Thank you for reading and see you on the next one. 👋