scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-09-22 00:31:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 51

fix(ui): VirtualKeysPage infinite re-render loop on Virtual Keys page

Browse source 
keys?.keys || [] creates a fresh [] reference on every render, which
triggers useFilterLogic's useEffect (dep: keys), which calls
setFilteredKeys, which re-renders the parent, which creates another
new [] — maximum update depth exceeded.

Stabilize the reference with useMemo(() => keys?.keys ?? [], [keys])
so the effect only fires when the actual server data changes.

Co-Authored-By: Claude Sonnet 4 (1M context) <noreply@anthropic.com>
This commit is contained in:
Bytechoreographer 2026-04-16 15:17:00 +08:00
parent 9c1c86bd48
commit 525e3e38d0
1 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ui/litellm-dashboard/src/components/VirtualKeysPage/VirtualKeysTable.tsx
View file

@ -94,11 +94,15 @@ export function VirtualKeysTable({ teams, organizations, onSortChange, currentSo
});
const [expandedAccordions, setExpandedAccordions] = useState<Record<string, boolean>>({});
// Use the filter logic hook
// Stabilize the keys array reference so that useFilterLogic's useEffect
// (which depends on `keys`) only fires when the actual data changes, not on
// every render caused by setFilteredKeys → re-render → new [] literal.
const stableKeys = useMemo(() => keys?.keys ?? [], [keys]);
// Use the filter logic hook
const { filters, filteredKeys, filteredTotalCount, allTeams, allOrganizations, handleFilterChange, handleFilterReset } =
useFilterLogic({
keys: keys?.keys || [],
keys: stableKeys,
teams,
organizations,
});