Jetpack Compose Side Effects & Effect Handlers -I

Source

Introduction

Hi🖐, have you ever encountered problems such as freezing, lagging, or crashing of your applications in your developments❔ Or does the use of your application during internet or database operations tire you out too much❔ The subject I will tell you about may be causing these problems. This article may be useful for you to understand whether these issues exist in your application.

In this article, we will discuss the important role of side effects and effect handlers in Compose. These effects can cause significant problems for developers, and we will explore how to manage them. Let’s take a look at what these effects are and how we can combat them together.

Source

What are Side Effects❔

Side effects are factors that are independent of the return value of composable functions, but can have an impact on the program’s operation and cause a change outside the general flow. To enhance user experience and usage efficiency, it is crucial to manage these side effects effectively. So, what are these effects and how do we unintentionally expose ourselves to them❔ Let’s elaborate a bit more to make it clearer.

Although the term “side effects” may seem unfamiliar to us, they are actually effects that we all encounter while developing applications. For example, we may be pulling data from an API in the application we are developing. If we do not establish an appropriate structure, we can limit the user’s UI access until we receive a response from the API request, even though we did not intend to do so. Or, we may record data to a database, send the data to our function, and think that our job is done. However, it is precisely at this point where the effects, which we call “side effects,” undermine the user experience of our application.

So how can we combat these effects❔ How can we have more effective user experience and improve the performance of our application❔ Well, to answer all of these questions, Compose provides us with effect handler types. So what are these effect handlers❔ Let’s take a look.

What is Effect Handler❔

Jetpack Compose uses a unidirectional data flow model to build the UI. Therefore, updating the UI state is triggered by modifying the state on top of the data flow. However, sometimes there are operations that applications need to perform that may not be directly related to the UI state. For example, operations like downloading data from an API, reading/writing files, and local database operations fall into this category.

If effect handlers are not used to perform these operations, they can block the UI thread and negatively impact the application’s performance. For instance, a network library like Retrofit or Ktor can be used to make an API request. However, these libraries can block the UI thread and cause the user interface to freeze.

Effect handlers increase the testability of the code, make code maintenance easier, improve the performance of the written code, and make it easier to add new code.

Launched Effect

When you want to change the state or behavior of a part of the UI within a Composable function, you can use the launched effect feature. Launched effect is an asynchronous execution tool provided by Compose.

Launched effect allows you to perform asynchronous operations using suspend functions. For example, when you want to perform a file download operation, you can use a suspend function to carry out the download. This prevents the composable function from waiting and improves its performance.

Let’s take a closer look at the example we provided above. Let’s say we’re trying to fetch usernames with a network request.

Example for Launched Effect

Here, we are using the fetchUserDetails() function with launched effect to retrieve the user’s name. When the operation is completed, we store the result in userDetailsState and display it as a Toast message.

In short, launched effect is a powerful feature of Jetpack Compose that allows you to perform asynchronous operations to change the UI state and behavior.

Disposable Effect

When you want to start a process and release resources when the process is finished within a composable function, you can use the disposable effect feature provided by Jetpack Compose, which is an asynchronous execution tool.

Its main purpose is to clean up after the composable function, which has completed its task, in a way that does not leave any memory leaks behind. Similarly, with the onDispose block, it prevents any remaining data in the stopped composable function from causing leaks by cleaning them up.

As an example of this, let’s create an animated text. Let’s try to apply the animation to our project in a way that ensures that it works smoothly, considering that the animation process may be interrupted.

Example for Disposable Effect

In this example, we use the disposable effect to start an animation and store its progress in a state. Then, we stop the animation using the onDispose property. Finally, we display a text on the screen based on the progress of the animation.

Side Effect

SideEffect can be defined anywhere inside a Composable function, however, a SideEffect function cannot make any changes to the UI. In other words, a SideEffect only runs specific non-interactive code and does not make any changes to the UI.

For example, in an application where a user’s profile picture is being changed, the new photo is downloaded from the server and saved to the database, which can be done independently of UI operations and prevents performance issues.

In summary, SideEffect is a function used in Jetpack Compose’s declarative structure to perform non-interactive tasks. It does not make any changes to the UI but prevents performance issues and makes the application run faster.

Example for Side Effect

In the above example, the SideEffect function allows database queries to be made. It does not make any changes to the UI but waits for the database operations to complete. As a result, a snackbar is displayed after the items are updated. In this example, SideEffect ensures that the database operations are performed independently of UI operations.

Conclusion

We have examined together the impact of side effects on applications and ways to deal with these effects 🕵️. We have explained how these effects can affect the application due to independent tasks from the code written for UI, and how they can cause a bad user experience by blocking the UI, emphasizing the critical importance of side effects for the application.

These were the first ideas that I can give you for a smooth application. Did you notice❔ Actually, it is possible to make our applications smoother by adding small differences and structures. If you did not experience any problems mentioned above, I suggest you read my article on this subject, which is the continuation of this article.

Happy days and happy coding! 👨‍💻👩🏼‍💻

References

Jetpack Compose Side Effects - With Examples - Appcircle Blog

Jetpack Compose Effect Handlers

Jetpack Compose Side-Effects II — rememberCoroutineScope