More performance updates

src/components/WeatherModal/CurrentWeather.tsx

@@ -1,7 +1,5 @@
 import { Box, Card, Group, Stack, Text } from '@mantine/core';
-import { useCommonHooks } from 'hooks';
-import { useSunStateAPI } from 'hooks/useAPI';
-import { useEffect, useState } from 'react';
+import { useCommonHooks, useSunStateAPI } from 'hooks';
 import { FaLongArrowAltDown, FaLongArrowAltUp, FaWind } from 'react-icons/fa';
 import { WiBarometer, WiHumidity, WiSunrise, WiSunset } from 'react-icons/wi';
 import { textClasses } from 'styles';
@@ -16,21 +14,15 @@ export default function CurrentWeather({ current }: { current: CW }) {
 		lon: currentLocation.lon,
 	});
 
-	const [sunStates, setSunStates] = useState<SunState[]>([]);
+	const sunStates: SunState[] =
+		sunStateData?.results.map((item: SunState) => {
+			return {
+				date: item.date,
+				sunrise: item.sunrise,
+				sunset: item.sunset,
+			};
+		}) || [];
 
-	useEffect(() => {
-		if (sunStateData) {
-			setSunStates(
-				sunStateData.results.map((item: SunState) => {
-					return {
-						date: item.date,
-						sunrise: item.sunrise,
-						sunset: item.sunset,
-					};
-				}),
-			);
-		}
-	}, [sunStateData]);
 	return (
 		<>
 			{current && (

src/components/WeatherModal/WeatherFeaturePill.tsx

@@ -7,7 +7,7 @@ function WeatherFeaturePill({
 }: {
 	leftSide: React.ReactNode;
 	rightSide: React.ReactNode;
-	highlight?: string;
+	highlight?: 'left' | 'right';
 }) {
 	return (
 		<Group

src/components/WeatherModal/WeatherModal.tsx

@@ -1,6 +1,5 @@
 import { Center, Group, Modal, Stack, Text } from '@mantine/core';
 import { useCommonHooks, useWeatherAPI } from 'hooks';
-import { useEffect, useState } from 'react';
 import { modalClasses } from 'styles';
 
 import type { CurrentWeather as CW, ExtendedForecast, HourlyForecast } from 'types';
@@ -28,13 +27,9 @@ export function WeatherModal({
 		x: currentLocation.x,
 		y: currentLocation.y,
 	});
-	const [hourlyForecast, setHourlyForecast] = useState<HourlyForecast[]>([]);
+	const hourlyForecast: HourlyForecast[] =
+		hourly?.properties?.periods?.slice(1, 25) || [];
 
-	useEffect(() => {
-		if (hourly) {
-			setHourlyForecast(hourly.properties.periods.slice(1, 25));
-		}
-	}, [hourly]);
 	return (
 		<Modal.Root
 			fullScreen={isMobile}