Currently, the Collapsible component renders its content regardless of whether it's expanded or not.
It does so in order to be able to calculate the height to which it needs to expand.
This can lead to performance issues when you have many Collapsible elements on the screen.
And even for a single item, it's redundant to render what the user doesn't see.
The solution is to not render the content when expanded is false, but when it's changing to true, render it collapsed, capture the height, and then expand.
Currently, the
Collapsiblecomponent renders its content regardless of whether it's expanded or not. It does so in order to be able to calculate the height to which it needs to expand.This can lead to performance issues when you have many
Collapsibleelements on the screen. And even for a single item, it's redundant to render what the user doesn't see.The solution is to not render the content when
expandedisfalse, but when it's changing totrue, render it collapsed, capture the height, and then expand.