Datepicker has performance issues while interacting with days

[Elolawyn]

While using this datepicker with android (but it happens with ios too), selecting days takes a while to render again because all Day components render again. React.memo does not seem to be working. To check it out, you can add console.log('render ComponentName') like:

...
  const textStyle = isSelected
    ? { color: '#fff', ...theme?.selectedTextStyle }
    : isToday
    ? {
        ...theme?.calendarTextStyle,
        color: theme?.selectedItemColor || '#0047FF',
        ...theme?.todayTextStyle,
      }
    : theme?.calendarTextStyle;

  console.log('render Day', date);

  return (
    <View style={styles.dayCell}>
      <Pressable
        disabled={disabled}
        onPress={() => onSelectDate(date)}
        style={[
          styles.dayContainer,
          dayContainerStyle,
          todayItemStyle,
          activeItemStyle,
          disabled && styles.disabledDay,
        ]}
        testID={date}
...

This way, you will see that all components render again every time you press on a different day.

For this component in particular, i have tried:

export default React.memo(Day, (props1, props2) => {
  // If you return true, component is memorized
  return (
    props1.date === props2.date &&
    props1.disabled === props2.disabled &&
    props1.isCurrentMonth === props2.isCurrentMonth &&
    props1.isToday === props2.isToday &&
    props1.isSelected === props2.isSelected
  )
});

And now the calendar seems to be faster. I guess React.memo should be checked in every component that uses/might use it?

[farhoudshapouran]

Hello @Elolawyn thank you for suggesting these fixes I will test and implement it.

[YaoHuiJi]

hi @farhoudshapouran, any progress about this issue?

[farhoudshapouran]

hi @farhoudshapouran, any progress about this issue?

hi, @YaoHuiJi sorry for the late reply, I fixed this issue and after some reviews, I will release a new version.