stripe-android icon indicating copy to clipboard operation
stripe-android copied to clipboard

[BUG] The use of rememberPaymentSheet in jetpack compose Generate Thousands of recompositions in all the view

Open cesarwillymc opened this issue 1 year ago • 0 comments

Summary

The number of recompositions before to implement stripe is normal, but if I only add this line.

import com.stripe.android.paymentsheet.rememberPaymentSheet
rememberPaymentSheet(paymentResultCallback = {
           Log.e("teste","test $it")
        })

Generate to much recompositions by seconds.

Code to reproduce

@Composable
@Preview
fun TestForStripe(){
    val typePayments= listOf("Basic", "Premium")
    var currentPayment by remember {
        mutableStateOf("Basic")
    }
    val data=  rememberPaymentSheet(paymentResultCallback = {
        Log.e("teste","test $it")
    })
    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun SegmentedPicker(
        modifier: Modifier = Modifier,
        items: List<String>,
        currentSelected: String = currentPayment,
        cornerRadius: Int = 24,
        onItemSelection: (selectedItem: String) -> Unit
    ) {
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .height(38.dp),
            colors = CardDefaults.cardColors(
                containerColor = Color.White.copy(alpha = 0.16f)
            ),
            shape = RoundedCornerShape(cornerRadius)
        ) {
            Row(
                modifier = modifier
                    .fillMaxWidth()
                    .background(Color.White.copy(alpha = 0.16f)),
                horizontalArrangement = Arrangement.Center
            ) {
                items.forEachIndexed { index, item ->
                    Card(
                        modifier = modifier
                            .weight(1f)
                            .height((38 + 8).dp),
                        onClick = {
                            onItemSelection(item)
                        },
                        colors = CardDefaults.cardColors(
                            containerColor = if (item == currentSelected) {
                                Color.White
                            } else {
                                Color.Transparent
                            },
                            contentColor = if (item == currentSelected)
                                Color.Black
                            else
                                Color.White
                        ),
                        shape = when (index) {
                            0 -> RoundedCornerShape(
                                topStartPercent = cornerRadius,
                                topEndPercent = cornerRadius,
                                bottomStartPercent = cornerRadius,
                                bottomEndPercent = cornerRadius
                            )

                            items.size - 1 -> RoundedCornerShape(
                                topStartPercent = cornerRadius,
                                topEndPercent = cornerRadius,
                                bottomStartPercent = cornerRadius,
                                bottomEndPercent = cornerRadius
                            )

                            else -> RoundedCornerShape(
                                topStartPercent = 0,
                                topEndPercent = 0,
                                bottomStartPercent = 0,
                                bottomEndPercent = 0
                            )
                        },
                    ) {
                        Box(modifier = modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                            Text(
                                text = item,
                                textAlign = TextAlign.Center
                            )
                        }
                    }
                }
            }
        }

    }
    Box(modifier = Modifier
        .fillMaxSize()
        .background(Color.Black)){
        Column {
            SegmentedPicker(
                items = typePayments,
                currentSelected = currentPayment,
                onItemSelection = {
                    currentPayment =it
                }
            )

            Text(currentPayment, color = Color.White, style = MaterialTheme.typography.titleLarge)
        }
    }
}```


## Android version
All


kotlin:
stripe-android: com.stripe:stripe-android:20.34.4

## Video
<img width="981" alt="Screenshot 2024-02-28 at 9 45 48 AM" src="https://github.com/stripe/stripe-android/assets/48421004/65cb4c3a-6416-46b5-8edf-2ed5498936f5">
## Other information
This error happens when you start any interaction with the screen like push a button, edit text, etc. 
If this error generate more than 200 times only with 2 items, if I have one complete screen this will generate all the screen will be lag.

cesarwillymc avatar Feb 28 '24 17:02 cesarwillymc