Search bar fixes and performance updates

src/pages/settings/components/WoL/WolClients.tsx

@@ -35,19 +35,20 @@ const WolClientSettings = () => {
 		},
 	});
 	const endpoint = 'api/wolClients';
-	const {
-		data: wolClientsData,
-		isFetched: wolClientsIsFetched,
-		isFetching: wolClientsIsFetching,
-	} = useQueryAPI({
+	const { data: wolClientsData, isFetching: wolClientsIsFetching } = useQueryAPI({
 		endpoint: endpoint,
 	});
-	const [wolClients, setWolClients] = useState<WolClient[]>([]);
+	const [searchValue, setSearchValue] = useState<string | number>('');
+	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
+	const wolClients: WolClient[] =
+		wolClientsData.filter(
+			(a: WolClient) =>
+				a.hostname.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
+				a.macAddress.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
+		) || [];
 	const { mutateAsync } = useMutationAPI();
 	const { isMobile, theme } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
-	const [searchValue, setSearchValue] = useState<string | number>('');
-	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 	const [isOpen, setIsOpen] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
 
@@ -57,23 +58,10 @@ const WolClientSettings = () => {
 	};
 
 	useEffect(() => {
-		if (wolClientsData && wolClientsIsFetched) {
-			setWolClients(
-				wolClientsData.filter(
-					(a: WolClient) =>
-						a.hostname
-							.toLowerCase()
-							.includes((debouncedSearch as string).toLowerCase()) ||
-						a.macAddress
-							.toLowerCase()
-							.includes((debouncedSearch as string).toLowerCase()),
-				),
-			);
-		}
 		if (debouncedSearch === searchValue) {
 			setIsLoading(false);
 		}
-	}, [wolClientsData, wolClientsIsFetched, debouncedSearch]);
+	}, [debouncedSearch]);
 
 	return (
 		<Stack>