fixed: react infinite rerendering timezone dropdown

ever-co · Nov 17, 2023 · 1357be9 · 1357be9
1 parent 60a310b
commit 1357be9
Showing 1 changed file with 23 additions and 20 deletions.
diff --git a/apps/web/lib/settings/timezone-dropdown.tsx b/apps/web/lib/settings/timezone-dropdown.tsx
@@ -7,6 +7,8 @@ import { clsxm } from '@app/utils';
 import moment from 'moment-timezone';
 import _debounce from 'lodash/debounce';
 
+const allTimezonesNames = moment.tz.names();
+
 export const TimezoneDropDown = ({
 	currentTimezone,
 	onChangeTimezone
@@ -17,30 +19,31 @@ export const TimezoneDropDown = ({
 	const { activeTimezone, setActiveTimezone } = useTimezoneSettings();
 	const [searchText, setSearchText] = useState<string>('');
 
-	const allTimezonesNames = moment.tz.names();
-	const allTimezonesWithUTC = allTimezonesNames.map((item) => {
-		const offset = moment.tz(item).format('Z');
-		return { name: item, offset: offset };
-	});
+	const items = useMemo(() => {
+		const allTimezonesWithUTC = allTimezonesNames.map((item) => {
+			const offset = moment.tz(item).format('Z');
+			return { name: item, offset: offset };
+		});
 
-	allTimezonesWithUTC.sort((a, b) => {
-		// Compare the offsets for sorting
-		if (a.offset < b.offset) {
-			return -1;
-		}
-		if (a.offset > b.offset) {
-			return 1;
-		}
-		return 0;
-	});
+		allTimezonesWithUTC.sort((a, b) => {
+			// Compare the offsets for sorting
+			if (a.offset < b.offset) {
+				return -1;
+			}
+			if (a.offset > b.offset) {
+				return 1;
+			}
+			return 0;
+		});
 
-	const sortedTimezones = allTimezonesWithUTC.map((item) => `${item.name} (UTC ${item.offset})`);
+		const sortedTimezones = allTimezonesWithUTC.map((item) => `${item.name} (UTC ${item.offset})`);
 
-	const timeZonesMap: string[] = sortedTimezones.filter((item) =>
-		item.toLowerCase().includes(searchText.toLowerCase())
-	);
+		const timeZonesMap: string[] = sortedTimezones.filter((item) =>
+			item.toLowerCase().includes(searchText.toLowerCase())
+		);
 
-	const items = useMemo(() => mapTimezoneItems(timeZonesMap), [timeZonesMap]);
+		return mapTimezoneItems(timeZonesMap);
+	}, []);
 
 	const [timezoneItem, setTimezoneItem] = useState<TimezoneItem | null>(null);