0

I am using https://github.com/kizitonwose/Calendar/tree/main/sample/src/main/java/com/kizitonwose/calendar/sample/compose to build a vertical calendar, how can I limit the number of recomposition of the days, because my app is getting slow. This is my view containing all components.
When scrolling it its becoming very slow due to recomposition

@Composable
fun ChooseDateView(
    appointmentViewModel: AppointmentViewModel,
    modifier: Modifier = Modifier
        .background(color = Color.White)
        .height(400.dp)
) {
    var selectedDate by remember { mutableStateOf<LocalDate>(appointmentViewModel.state.value.currentDateTime) }
    val currentMonth =
        remember { mutableStateOf<LocalDate>(appointmentViewModel.state.value.currentDateTime).value.yearMonth }
    val startMonth = remember { YearMonth.now().minusMonths(24) }
    val endMonth = remember { YearMonth.now().plusMonths(24) }
    val daysOfWeek = remember { daysOfWeek(firstDayOfWeek = DayOfWeek.MONDAY) }

    val state = rememberCalendarState(
        startMonth = startMonth,
        endMonth = endMonth,
        firstVisibleMonth = currentMonth,
        firstDayOfWeek = daysOfWeek.first()
    )
    Card(
        shape = RoundedCornerShape(8.dp),
        elevation = 8.dp
    ) {
    Column {
        TopBar(
            modifier = Modifier
                .background(color = Color.White),
            title = "Choose Date",
            leftContent = {
                IconButton(
                    modifier = Modifier,
                    onClick = {
                        appointmentViewModel.onEvent(AppointmentEvent.ClosedDialog)
                    }) {
                    Icon(
                        Icons.Default.ArrowBack,
                        contentDescription = "back"
                    )
                }
            }
        )
        DaysOfWeekTitle(daysOfWeek = daysOfWeek)
        VerticalCalendar(
            modifier = modifier
                .height(360.dp),
            state = state,
            dayContent = { day ->
                Day(day, isSelected = selectedDate == day.date) { day ->
                    selectedDate = day
                    appointmentViewModel.onEvent(AppointmentEvent.OnSelectedDate(day))
                }
            },
            monthHeader = { month ->
                println("========== i got rerender i am maping entire weekdays")
                //val daysOfWeek = month.weekDays.first().map { it.date.dayOfWeek }
                MonthHeader(month)
            }
        )
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .background(color = appColors.primary),
            horizontalArrangement = Arrangement.SpaceEvenly

        ) {
            TextButton(onClick = { appointmentViewModel.onEvent(AppointmentEvent.ClosedDialog) }) {
                Text(
                    text = "Dismiss",
                    style = FontLibrary.regularBody14(color = Color.White),
                    modifier = Modifier.padding(top = 5.dp, bottom = 5.dp)

                )
            }
            TextButton(onClick = { appointmentViewModel.onEvent(AppointmentEvent.ClosedDialog) }) {
                Text(
                    text = "Change Date",
                    style = FontLibrary.regularBody14(color = Color.White),
                    modifier = Modifier.padding(
top = 5.dp, bottom = 5.dp)
                )
            }

        }
    }
}
}

  @Composable
  fun Day(day: CalendarDay, isSelected: Boolean, onClick: (LocalDate) -> Unit) {
    println("======== day is recomposed")
    Box(
        modifier = Modifier
            .aspectRatio(1f) // This is important for square sizing!
            .clip(CircleShape)
            .background(color = if (isSelected && day.position == DayPosition.MonthDate) appColors.primary else Color.Transparent)
            .clickable(
                enabled = day.position == DayPosition.MonthDate,
                onClick = { onClick(day.date) }
            ),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = day.date.dayOfMonth.toString(),
            style = FontLibrary.Outfit18(
                color = if (day.position == DayPosition.MonthDate && isSelected) Color.White
                else if (day.position == DayPosition.MonthDate) appColors.secondary
                else Color.Transparent
            )
        )
    }
}
EliodeBeirut
  • 74
  • 1
  • 13
  • 1
    Are you sure your app is slow because of recompositions? How many days are you displaying? – Steyrix Dec 12 '22 at 10:32
  • How do you call `Day` composable? – Steyrix Dec 12 '22 at 10:45
  • @Steyrix since OP confirmed that CalendarDay is @Immutable, I think the local date is the one causing re-compositions in the Day composable, its a similar issue I answered regarding the usage of `Context` inside a lambda – z.g.y Dec 12 '22 at 11:13
  • 1
    Not sure if compose triggers recompositions based on data class fields' changing. I thought it recomposes only if the whole class is unstable or the whole object (reference) changes – Steyrix Dec 12 '22 at 11:28

0 Answers0