In this post, we will see how to resolve TabRow/Tab Recomposition Issue in Compose Accompanist Pager
Question:I was trying to create a sample Tab View in Jetpack compose, so the structure will be like Inside a Parent TabRow we are iterating the tab title and create Tab composable.
More precise code will be like this.
Am attaching an image of the recomposition counts below, please take a look that too, it would be good if you guys can help me more for understand this, also for future developers.
There are two question we have to resolve in this stage
- Whether it will create any performance issue, when the view getting more complex
- How to resolve this recompostion issue
… whenever we click on the tab item, the inner content get recompose so weirdly. Im not able to understand why it is happens…
It’s hard to determine what this “weirdness” is, there could be something inside the composable your’e mentioning here.
You also didn’t specify what the API is, so I copied and pasted your code and integrated accompanist view pager, then I was able to run it though not on an
Android Studiowith a
And since your’e only concerned about the
Iconparameter of the API, I think that’s something out of your control. I suspect the reason why your’e getting those number of re-composition count is because your’e
Android Studioversion with the
re-compositionfeature, I think (though I’m not sure) scrolling to another
animationwill yield less re-composition count.
Iconbeing re-composed many times by an animation which is also fine IMO.
Now if you have some concerns about your
PagerSampleItemstability(which you have a full control), based on the provided code and screenshot, I think your’e fine.
There’s actually a feature suggested from this article to check the stability of a
composable, I run it and I got this report.
ImageVectorwhich is stable and immutable (marked by @Immutable) respectively.
So TLDR, IMO your code is fine, your
re-composingin the screenshot.
If you have better answer, please add a comment about this, thank you!