chore: using memo to optimize performance

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-datepicker",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Customizable datetime picker for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

src/components/Calendar.tsx

@@ -9,18 +9,23 @@ import DaySelector from './DaySelector';
 import TimeSelector from './TimeSelector';
 
 const Calendar = () => {
-  const { calendarView, mode } = useCalendarContext();
+  const { utils, currentDate, selectedDate, calendarView, mode } =
+    useCalendarContext();
+  const days = utils.getMonthDays(currentDate);
+  const currentMonth = utils.getDateMonth(currentDate);
+  const currentYear = utils.getDateYear(currentDate);
+  const selectedYear = utils.getDateYear(selectedDate);
 
   return (
     <View style={styles.container}>
       {mode !== 'time' ? <Header /> : null}
       <View style={styles.calendarContainer}>
         {calendarView === CalendarViews.year ? (
-          <YearSelector />
+          <YearSelector currentYear={currentYear} selectedYear={selectedYear} />
         ) : calendarView === CalendarViews.month ? (
-          <MonthSelector />
+          <MonthSelector month={currentMonth} />
         ) : calendarView === CalendarViews.day ? (
-          <DaySelector />
+          <DaySelector days={days} />
         ) : (
           <TimeSelector />
         )}

src/components/DaySelector.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
+import type { IDayObject } from '../utils';
 
-const DaySelector = () => {
+const DaySelector = ({ days }: { days: IDayObject[] }) => {
   const { utils, currentDate, selectedDate, onSelectDate, theme } =
     useCalendarContext();
-  const days = utils.getMonthDays(currentDate);
 
   const handleSelectDate = (date: string) => {
     const newDate = utils
@@ -145,4 +145,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default DaySelector;
+export default memo(DaySelector);

src/components/MonthSelector.tsx

@@ -1,25 +1,24 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
 
-const MonthSelector = () => {
-  const { utils, currentDate, onSelectMonth, theme } = useCalendarContext();
-  const currentMonth = utils.getDateMonth(currentDate);
+const MonthSelector = ({ month }: { month: number }) => {
+  const { utils, onSelectMonth, theme } = useCalendarContext();
 
   return (
     <View style={styles.container}>
       <View style={styles.monthsContainer}>
         {utils.getMonths().map((item, index) => {
           const activeItemStyle =
-            index === currentMonth
+            index === month
               ? {
                   borderColor: theme?.selectedItemColor || '#0047FF',
                   backgroundColor: theme?.selectedItemColor || '#0047FF',
                 }
               : null;
 
           const textStyle =
-            index === currentMonth
+            index === month
               ? { color: '#fff', ...theme?.selectedTextStyle }
               : theme?.calendarTextStyle;
 
@@ -73,4 +72,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default MonthSelector;
+export default memo(MonthSelector);

src/components/YearSelector.tsx

@@ -1,14 +1,17 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
 
-const YearSelector = () => {
-  const { utils, currentDate, selectedDate, onSelectYear, theme } =
-    useCalendarContext();
+type Props = {
+  currentYear: number;
+  selectedYear: number;
+};
+
+const YearSelector = ({ currentYear, selectedYear }: Props) => {
+  const { onSelectYear, theme } = useCalendarContext();
   const rowArray = [1, 2, 3];
   const colArray = [1, 2, 3, 4];
-  const currentYear = utils.getDateYear(currentDate);
-  const selectedYear = utils.getDateYear(selectedDate);
+
   let year = 12 * Math.ceil(currentYear / 12) - 12;
   if (year < 0) year = 0;
 
@@ -82,4 +85,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default YearSelector;
+export default memo(YearSelector);

src/utils.ts

@@ -20,7 +20,7 @@ type ConfigTypes = {
   timeFormat: string;
 };
 
-interface IDayObject {
+export interface IDayObject {
   text: string;
   day: number;
   date: string;
@@ -102,6 +102,12 @@ export default class utils {
 
   getDate = (date: DateType) => dayjs(date, this.config.calendarFormat);
 
+  /**
+   * Calculate month days array based on current date
+   *
+   * @param {DateType} datetime The current date that selected
+   * @returns {IDayObject[]} days array based on current date
+   */
   getMonthDays = (datetime: DateType): IDayObject[] => {
     let date = this.getDate(datetime);
     const currentMonthDays = date.daysInMonth();