feat(page): Optimize data handling with useMemo for boards, agents, and gateways

frontend/src/app/agents/page.tsx

@@ -120,8 +120,8 @@ export default function AgentsPage() {
     refetchOnMount: "always",
   });
 
-  const boards = boardsQuery.data ?? [];
-  const agents = agentsQuery.data ?? [];
+  const boards = useMemo(() => boardsQuery.data ?? [], [boardsQuery.data]);
+  const agents = useMemo(() => agentsQuery.data ?? [], [agentsQuery.data]);
 
   useEffect(() => {
     if (!boardId && boards.length > 0) {
@@ -285,6 +285,7 @@ export default function AgentsPage() {
     [boards]
   );
 
+  // eslint-disable-next-line react-hooks/incompatible-library
   const table = useReactTable({
     data: sortedAgents,
     columns,

frontend/src/app/boards/[boardId]/edit/page.tsx

@@ -53,10 +53,6 @@ export default function EditBoardPage() {
 
   const isFormReady = Boolean(name.trim() && gatewayId);
 
-  const selectedGateway = useMemo(
-    () => gateways.find((gateway) => gateway.id === gatewayId) || null,
-    [gateways, gatewayId]
-  );
   const gatewayOptions = useMemo(
     () => gateways.map((gateway) => ({ value: gateway.id, label: gateway.name })),
     [gateways]

frontend/src/app/boards/new/page.tsx

@@ -50,10 +50,6 @@ export default function NewBoardPage() {
 
   const isFormReady = Boolean(name.trim() && gatewayId);
 
-  const selectedGateway = useMemo(
-    () => gateways.find((gateway) => gateway.id === gatewayId) || null,
-    [gateways, gatewayId]
-  );
   const gatewayOptions = useMemo(
     () => gateways.map((gateway) => ({ value: gateway.id, label: gateway.name })),
     [gateways]

frontend/src/app/boards/page.tsx

@@ -53,7 +53,7 @@ export default function BoardsPage() {
     refetchOnMount: "always",
   });
 
-  const boards = boardsQuery.data ?? [];
+  const boards = useMemo(() => boardsQuery.data ?? [], [boardsQuery.data]);
 
   const sortedBoards = useMemo(
     () => [...boards].sort((a, b) => a.name.localeCompare(b.name)),
@@ -141,6 +141,7 @@ export default function BoardsPage() {
     []
   );
 
+  // eslint-disable-next-line react-hooks/incompatible-library
   const table = useReactTable({
     data: sortedBoards,
     columns,

frontend/src/app/gateways/page.tsx

@@ -72,7 +72,7 @@ export default function GatewaysPage() {
     }
   );
 
-  const gateways = gatewaysQuery.data ?? [];
+  const gateways = useMemo(() => gatewaysQuery.data ?? [], [gatewaysQuery.data]);
   const sortedGateways = useMemo(() => [...gateways], [gateways]);
 
   const deleteMutation = useAuthedMutation<
@@ -193,6 +193,7 @@ export default function GatewaysPage() {
     []
   );
 
+  // eslint-disable-next-line react-hooks/incompatible-library
   const table = useReactTable({
     data: sortedGateways,
     columns,

frontend/src/app/onboarding/page.tsx

@@ -35,7 +35,6 @@ export default function OnboardingPage() {
   const { getToken, isSignedIn } = useAuth();
   const { user } = useUser();
 
-  const [profile, setProfile] = useState<UserProfile | null>(null);
   const [name, setName] = useState("");
   const [timezone, setTimezone] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -87,7 +86,6 @@ export default function OnboardingPage() {
         throw new Error("Unable to load profile.");
       }
       const data = (await response.json()) as UserProfile;
-      setProfile(data);
       const fallbackName =
         user?.fullName ?? user?.firstName ?? user?.username ?? "";
       setName(data.preferred_name ?? data.name ?? fallbackName);