fix(ui): stop Virtual Keys page from infinite render loop

ui/litellm-dashboard/src/components/VirtualKeysPage/VirtualKeysTable.tsx

@@ -52,7 +52,7 @@
  * The team selector and filtering have been removed so that all keys are shown.
  */
 
 export function VirtualKeysTable({ teams, organizations, onSortChange, currentSort }: VirtualKeysTableProps) {
   const { data: fetchedOrganizations } = useOrganizations();
   const resolvedOrganizations = fetchedOrganizations ?? organizations ?? [];
   const [selectedKey, setSelectedKey] = useState<KeyResponse | null>(null);
@@ -96,6 +96,8 @@
 
   // Use the filter logic hook
 
+  const keyList = useMemo(() => keys?.keys ?? [], [keys]);
+
   const {
     filters,
     filteredKeys,
@@ -105,7 +107,7 @@
     handleFilterChange,
     handleFilterReset,
   } = useFilterLogic({
-    keys: keys?.keys || [],
+    keys: keyList,
     teams,
     organizations,
   });
@@ -584,7 +586,7 @@
         },
       },
     ],
     [teams, resolvedOrganizations],
   );
 
   const filterOptions: FilterOption[] = [

ui/litellm-dashboard/src/components/key_team_helpers/filter_logic.test.tsx

@@ -20,12 +20,12 @@
 };
 
 const defaultProps = {
   keys: [mockKey] as any[],
   teams: [],
   organizations: [],
 };
 
 const makeApiResponse = (overrides: { keys?: any[]; total_count?: number; total_pages?: number } = {}) => ({
   keys: overrides.keys ?? [mockKey],
   total_count: overrides.total_count ?? 1,
   current_page: 1,
@@ -149,6 +149,23 @@
     expect(result.current.filteredTotalCount).toBeNull();
   });
 
+  it("should not enter an infinite update loop when keys is a fresh array reference on every render", () => {
+    const sourceKeys = [mockKey];
+    let renderCount = 0;
+
+    const { result } = renderHook(() => {
+      renderCount += 1;
+      const value = useFilterLogic({ keys: [...sourceKeys], teams: [], organizations: [] });
+      if (renderCount > 25) {
+        throw new Error(`useFilterLogic re-rendered ${renderCount} times; setFilteredKeys is looping`);
+      }
+      return value;
+    });
+
+    expect(result.current.filteredKeys).toEqual([mockKey]);
+    expect(renderCount).toBeLessThanOrEqual(25);
+  });
+
   it("should not trigger a debounced search when skipDebounce is true", async () => {
     const { result } = renderHook(() => useFilterLogic(defaultProps));
 

ui/litellm-dashboard/src/components/key_team_helpers/filter_logic.tsx

@@ -41,7 +41,7 @@
   const [filteredKeys, setFilteredKeys] = useState<KeyResponse[]>(keys);
   const [filteredTotalCount, setFilteredTotalCount] = useState<number | null>(null);
   const lastSearchTimestamp = useRef(0);
   const debouncedSearch = useCallback(
     debounce(async (filters: FilterState) => {
       if (!accessToken) {
         return;
@@ -99,7 +99,9 @@
       result = result.filter((key) => (key.organization_id ?? key.org_id) === filters["Organization ID"]);
     }
 
-    setFilteredKeys(result);
+    setFilteredKeys((prev) =>
+      prev.length === result.length && prev.every((key, index) => key === result[index]) ? prev : result,
+    );
   }, [keys, filters]);
 
   // Fetch all data for filters when component mounts