You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
First of all, thank you for creating the react-native calendar.
However, there is an issue with the customization of the DayComponent that causes too much rendering
This is due to the function or object comparison that goes into the props of the Calendar component.
It stems from the 'areEqual' function in react-native-calendars/src/calendar/day/index.js:11 not working correctly.
The specific point of misbehavior is
In the above-mentioned index.js file, on line 14, the omit function of lodash is incorrectly executed.
This is because functions like onPress, onLongPress, or objects specified by theme have different references when compared in the _.some function, so the React.memo function thinks it's a different object every time it's executed, and it doesn't work correctly.
So every time you click on a date within the same month, you'll see all 30+ components performing unnecessary operations that render over and over again.
Therefore, we need to add logic to ignore the comparison when comparing functions or objects.
//before functionareEqual(prevProps,nextProps){constprevPropsWithoutMarkDates=omit(prevProps,'marking');constnextPropsWithoutMarkDates=omit(nextProps,'marking');constdidPropsChange=some(prevPropsWithoutMarkDates,function(value,key){returnvalue!==nextPropsWithoutMarkDates[key];});constisMarkingEqual=isEqual(prevProps.marking,nextProps.marking);return!didPropsChange&&isMarkingEqual;}// after functionareEqual(prevProps,nextProps){constprevPropsWithoutMarkDates=omit(prevProps,'marking');constnextPropsWithoutMarkDates=omit(nextProps,'marking');constdidPropsChange=some(prevPropsWithoutMarkDates,function(value,key){if(typeofnextPropsWithoutMarkDates[key]==='function'){returnfalse;}if(typeofnextPropsWithoutMarkDates[key]==='object'){returnfalse;}returnvalue!==nextPropsWithoutMarkDates[key];});constisMarkingEqual=isEqual(prevProps.marking,nextProps.marking);return!didPropsChange&&isMarkingEqual;}
The text was updated successfully, but these errors were encountered:
First of all, thank you for creating the react-native calendar.
However, there is an issue with the customization of the DayComponent that causes too much rendering
This is due to the function or object comparison that goes into the props of the Calendar component.
It stems from the 'areEqual' function in react-native-calendars/src/calendar/day/index.js:11 not working correctly.
The specific point of misbehavior is
In the above-mentioned index.js file, on line 14, the omit function of lodash is incorrectly executed.
This is because functions like onPress, onLongPress, or objects specified by theme have different references when compared in the _.some function, so the React.memo function thinks it's a different object every time it's executed, and it doesn't work correctly.
So every time you click on a date within the same month, you'll see all 30+ components performing unnecessary operations that render over and over again.
Therefore, we need to add logic to ignore the comparison when comparing functions or objects.
The text was updated successfully, but these errors were encountered: