Flickering Effect Due to Unnecessary Recomposition

In the world of Android development, Jetpack Compose has revolutionized how we build user interfaces with its declarative approach, making it easier to create smooth and interactive apps. However, as I recently discovered, even simple tasks can lead to unexpected issues if not handled carefully.

I was working on a simple login Android app using Jetpack Compose. The goal was straightforward — after the user logged in, I would save the Auth token and JWT token using PreferenceManager and use both tokens to load the user profile from the server on the HomeScreen. Everything seemed to work smoothly at first. The login screen functioned as expected, saving the tokens after a successful login. But when I navigated to the HomeScreen to load the profile, the app began to flicker. The screen would constantly blink, and every time the profile tried to load, the UI would recompose. It was disorienting and frustrating.

After digging into the code, I realized that the issue was caused by how I was fetching the tokens and loading the profile. I had wrapped this logic in LaunchedEffect, expecting it to only run once when the HomeScreen was displayed. But, as soon as I updated the accessToken or jwtToken states, it caused the screen to recompose unnecessarily, leading to the flickering effect.

The solution? Move the token-fetching and profile-loading logic to the ViewModel. By doing this, the HomeScreen merely observed the state using LiveData. The tokens and profile were managed within…