Memoize dashboard and history table columns

frontend/src/components/BanTable.tsx

@@ -8,6 +8,7 @@
  * Columns: Time, IP, Service, Country, Jail, Ban Count.
  */
 
+import { useMemo } from "react";
 import {
   Badge,
   Button,
@@ -194,7 +195,7 @@ export function BanTable({ timeRange, origin = "all", source = "fail2ban" }: Ban
   const styles = useStyles();
   const { banItems, total, page, setPage, loading, error, refresh } = useBans(timeRange, origin, source);
 
-  const banColumns = buildBanColumns(styles);
+  const banColumns = useMemo(() => buildBanColumns(styles), [styles]);
 
   // --------------------------------------------------------------------------
   // Loading state

frontend/src/pages/HistoryPage.tsx

@@ -6,7 +6,7 @@
  * Rows with repeatedly-banned IPs are highlighted in amber.
  */
 
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   Badge,
   Button,
@@ -214,6 +214,15 @@ export function HistoryPage(): React.JSX.Element {
   const { items, total, page, loading, error, setPage, refresh } =
     useHistory(appliedQuery);
 
+  const handleIpClick = useCallback((ip: string): void => {
+    setSelectedIp(ip);
+  }, []);
+
+  const columns = useMemo(
+    () => HISTORY_COLUMNS(handleIpClick, styles),
+    [handleIpClick, styles],
+  );
+
   useEffect((): void => {
     const nextQuery: HistoryQuery = {
       range,
@@ -236,14 +245,6 @@ export function HistoryPage(): React.JSX.Element {
 
   const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
 
-  /** History table columns with IP click handler. */
-  const columns = HISTORY_COLUMNS(
-    (ip: string): void => {
-      setSelectedIp(ip);
-    },
-    styles,
-  );
-
   // If an IP is selected, show the detail view.
   if (selectedIp !== null) {
     return (