More performance updates

src/pages/homepage/components/SettingsButton/SettingsButton.tsx

@@ -1,6 +1,6 @@
 import { Box, Button, Group, Menu, Overlay, Stack } from '@mantine/core';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { FiMenu, FiSettings } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
 import { buttonClasses, menuClasses } from 'styles';
@@ -10,21 +10,29 @@ import ThemingCard from './ThemingCard';
 import WakeOnLan from './WakeOnLanCard';
 
 function SettingsButton() {
-	const { data: appCategoryData, isFetched: appCategoryDataIsFetched } = useQueryAPI({
+	const { data: appCategoryData } = useQueryAPI({
 		endpoint: 'api/appCategories',
 	});
 	const { data: wolClientData } = useQueryAPI({
 		endpoint: 'api/wolClients',
 	});
-	const { data: wolEnabledData, isFetched: wolEnabledDataIsFetched } = useQueryAPI({
+	const { data: wolEnabledData } = useQueryAPI({
 		endpoint: 'api/wolEnabled',
 	});
 	const wolClients: WolClient[] = wolClientData || [];
-	const [enabled, setEnabled] = useState<number>(0);
+	const enabled: number = wolEnabledData?.[0].enableWol || 0;
 	const { mutateAsync } = useMutationAPI();
-	const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
+	const categories = appCategoryData
+		? [
+				{ value: 'All', label: 'All' },
+				...appCategoryData.map((category: AppCategory) => {
+					return { value: category.filterName, label: category.filterName };
+				}),
+			]
+		: [{ value: 'All', label: 'All' }];
 	const [selectedClient, setSelectedClient] = useState<WolClient>(wolClientData?.[0]);
 	const navigate = useNavigate();
+
 	const {
 		theme,
 		isMobile,
@@ -54,21 +62,6 @@ function SettingsButton() {
 		});
 	};
 
-	useEffect(() => {
-		if (appCategoryData) {
-			const list: [any] = appCategoryData.map((category: AppCategory) => {
-				return { value: category.filterName, label: category.filterName };
-			});
-			list.unshift({ value: 'All', label: 'All' });
-			setCategories(list);
-		}
-	}, [appCategoryData, appCategoryDataIsFetched]);
-
-	useEffect(() => {
-		if (wolEnabledData && wolEnabledDataIsFetched) {
-			setEnabled(wolEnabledData[0].enableWol);
-		}
-	}, [wolEnabledData, wolEnabledDataIsFetched]);
 	return (
 		<Menu
 			classNames={menuClasses}