I’ve an `IconButton` in a list item of a `LazyColu...
# compose
l
I’ve an
IconButton
in a list item of a
LazyColumn
to which I pass
Icon
in two ways: 1. using
painterResource()
with my in app Image drawables (vector)
Copy code
Icon(
    modifier = Modifier.size(16.dp),
    painter = painterResource(
        id = if (isLiked) R.drawable.ic_like_filled else R.drawable.ic_like
    ),
    contentDescription = null,
    tint = if (isLiked) AppTheme.colors.selected else AppTheme.colors.unselected
)
This leads to Recomposition of Icon. 2. using
imageVector
with MaterialIcons
Copy code
Icon(
    modifier = Modifier.size(16.dp),
    imageVector = if (isLiked) Icons.Rounded.Favorite else Icons.Rounded.FavoriteBorder,
    contentDescription = null,
    tint = if (isLiked) AppTheme.colors.selected else AppTheme.colors.unselected
)
This skips Recomposition of Icon. Internally both seem to using
rememberVectorPainter()
and I’m failing to see why
painterResource
internal implementation can cause a Recomposition. Am I missing something here? 🤔 (Attaching the recomposition counter screenshots for reference. Attached in order of the above cases)
Here’s TalkLikeCount just in case
Copy code
@Composable
fun TalkLikeCount(
    modifier: Modifier = Modifier,
    likesCount: Int,
    isLiked: Boolean = false,
    onLikeClicked: () -> Unit
) {
    IconButton(
        modifier = modifier,
        onClick = onLikeClicked
    ) {
        Row {
            Icon(..)

            Text(text = "$likesCount")
        }
    }
}
p
@lilypuchi can you try this
Copy code
val ResId =  if (isLiked) R.drawable.ic_like_filled else R.drawable.ic_like
Icon(ImageVector.vectorResource(id = ResId), contentDescription = "")
and let me know ?
l
Thanks a lot!