Memoize dashboard and history table columns

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 (