fix(Calendar): use useCallback for useCalendarDate functions

This commit is contained in:
Tim 2024-10-29 08:39:29 +01:00
parent 19085da76b
commit 820f7eaf81
3 changed files with 8 additions and 6 deletions

View file

@ -24,7 +24,7 @@ const Calendar = ({ urlParams }: Props) => {
const [selected, setSelected] = useState<CalendarDate | null>(null); const [selected, setSelected] = useState<CalendarDate | null>(null);
const detailsTitle = useMemo(() => toDayMonth(selected), [selected]); const detailsTitle = useMemo(() => toDayMonth(selected), [selected, toDayMonth]);
return ( return (
<MainNavBars className={styles['calendar']} route={'calendar'}> <MainNavBars className={styles['calendar']} route={'calendar'}>

View file

@ -1,5 +1,7 @@
import { useCallback } from "react";
const useCalendarDate = (profile: Profile) => { const useCalendarDate = (profile: Profile) => {
const toMonthYear = (calendarDate: CalendarDate | null): string => { const toMonthYear = useCallback((calendarDate: CalendarDate | null): string => {
if (!calendarDate) return ''; if (!calendarDate) return '';
const date = new Date(); const date = new Date();
@ -10,9 +12,9 @@ const useCalendarDate = (profile: Profile) => {
month: 'long', month: 'long',
year: 'numeric', year: 'numeric',
}); });
}; }, [profile.settings]);
const toDayMonth = (calendarDate: CalendarDate | null): string => { const toDayMonth = useCallback((calendarDate: CalendarDate | null): string => {
if (!calendarDate) return ''; if (!calendarDate) return '';
const date = new Date(); const date = new Date();
@ -23,7 +25,7 @@ const useCalendarDate = (profile: Profile) => {
day: 'numeric', day: 'numeric',
month: 'short', month: 'short',
}); });
}; }, [profile.settings]);
return { return {
toMonthYear, toMonthYear,

View file

@ -27,7 +27,7 @@ const useSelectableInputs = (calendar: Calendar, profile: Profile) => {
const selectableInputs = React.useMemo(() => { const selectableInputs = React.useMemo(() => {
return mapSelectableInputs(calendar, toMonthYear); return mapSelectableInputs(calendar, toMonthYear);
}, [calendar]); }, [calendar, toMonthYear]);
return selectableInputs; return selectableInputs;
}; };