Jetpack Compose Side Effects & Effect Handlers -I
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.
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.
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.
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.
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! šØāš»š©š¼āš»