query client cache and better body types

src-web/hooks/useActiveWorkspace.ts

@@ -1,16 +1,14 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { act } from 'react-dom/test-utils';
 import type { Workspace } from '../lib/models';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 import { useWorkspaces } from './useWorkspaces';
 
 export function useActiveWorkspace(): Workspace | null {
-  const workspaces = useWorkspaces();
   const workspaceId = useActiveWorkspaceId();
-  const [activeWorkspace, setActiveWorkspace] = useState<Workspace | null>(null);
-
-  useEffect(() => {
-    setActiveWorkspace(workspaces.find((w) => w.id === workspaceId) ?? null);
-  }, [workspaces, workspaceId]);
-
-  return activeWorkspace;
+  const workspaces = useWorkspaces();
+  return useMemo(
+    () => workspaces.find((w) => w.id === workspaceId) ?? null,
+    [workspaces, workspaceId],
+  );
 }