react-native-calendars
react-native-calendars copied to clipboard
Performance issues
The calendar is doing many re-renderings due to the function definitions in index.js. The Day component is getting re-rendered since the functions onPress and onLongPress are declared as arrow functions.
Here are the lines of code:
const onPressDay = useCallback((date) => {
if (date)
handleDayInteraction(date, onDayPress);
}, [handleDayInteraction, onDayPress]);
const onLongPressDay = useCallback((date) => {
if (date)
handleDayInteraction(date, onDayLongPress);
}, [handleDayInteraction, onDayLongPress]);
<Day {...dayProps} date={toMarkingFormat(day)} state={getState(day, currentMonth, props)} marking={markedDates?.[toMarkingFormat(day)]} onPress={onPressDay} onLongPress={onLongPressDay}/>
It causes the calendar to open very slowly. Is there a way to overcome this rendering issue?
Hey!
It looks like the issue with callbacks is fixed with #1891.
But there is still unnecessary re-renders are happening because of marking
prop. <Day />
component itself is wrapped with memo
but as long as it receives complex props we have to pass comparison function as the second argument to memo
. At least I've managed to avoid those re-renders by passing isEqual
from lodash
.
There is might be a better way to optimize it.
@Inbal-Tish could you please take a look?
Just installed the last commit. It does not result in any improvement on my side.
Since we updated from 1.1260.0
to 1.1285.0
we're also experiencing degraded performance.
The jump fixed our issue with the CalendarList component, which is that updates to the prop minDate were not reflected / re-rendered in the calendar. So my guess is that more props would be triggering re-renders now, which previously wouldn't.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
Definitely not considering this stale..