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

[ryan-crabbe-berri]

Summary

The Virtual Keys page could lock into an infinite render loop, spamming "Maximum update depth exceeded" and pinning the browser. The keys-filter effect in useFilterLogic called setFilteredKeys with a freshly built array on every [keys, filters] change, while the caller passed keys?.keys || [], which mints a new array identity on every render whenever the keys list is empty or still loading. That unstable reference re-fired the effect each render, looping until React bailed at max update depth. This is most visible right after a fresh DB / migration when there are no keys yet.

The fix makes setFilteredKeys bail out when the filtered result is element-for-element unchanged, matching the prev-bailout pattern the sibling teams/organizations effects in the same file already use, so the hook is loop-proof regardless of caller. The caller also memoizes the array it passes in so the hook stops receiving a churned reference.

Test plan

• filter_logic.test.tsx — new regression test renders the hook with a fresh array reference on every render; it fails fast without the guard (throws "re-rendered 26 times; setFilteredKeys is looping") and passes with it
• filter_logic.test.tsx — all 8 tests pass
• VirtualKeysTable.test.tsx — all 28 tests pass (caller memoization change)
• Local dev server recompiled cleanly and the Maximum update depth exceeded spam no longer appears in the UI log when viewing the Virtual Keys page

[greptile-apps]

Greptile Summary

Fixes an infinite render loop on the Virtual Keys page by applying a functional-setState bailout in useFilterLogic and memoizing the key list passed by the caller.

• filter_logic.tsx: The keys-filter useEffect now uses setFilteredKeys((prev) => ...) and returns prev unchanged when the new filtered result is element-for-element identical, matching the existing bailout pattern used by the sibling teams/organizations effects and making the hook loop-proof regardless of caller.
• VirtualKeysTable.tsx: keys?.keys ?? [] is replaced with a useMemo-stabilized keyList, eliminating the churned array reference that triggered the effect on every render when the keys list was empty or still loading.
• filter_logic.test.tsx: A focused regression test passes a fresh [...sourceKeys] array on every render and throws immediately if more than 25 re-renders occur, directly reproducing the pre-fix failure mode.

Confidence Score: 5/5

Safe to merge — the change is narrowly scoped to the keys-filter effect and adds no new network calls or state shape changes.

The fix is minimal and correct: the functional setState bailout is the idiomatic React pattern for skipping redundant updates, and it matches what the same hook already does for teams and organizations. Both the hook-level guard and the caller-side memoization work independently, so neither alone is a single point of failure. The regression test reproduces the exact trigger (churned array identity) and would have caught the bug before merge.

No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/key_team_helpers/filter_logic.tsx	Core fix: keys-filter effect now bails out via functional setState when the new result is element-for-element identical to prev, matching the pattern already used by the sibling teams/organizations effects and breaking the infinite render loop.
ui/litellm-dashboard/src/components/VirtualKeysPage/VirtualKeysTable.tsx	Caller-side defense: keys?.keys ?? [] replaced with a useMemo-stabilized keyList so the hook no longer receives a churned array reference on every render when the keys list is empty or loading.
ui/litellm-dashboard/src/components/key_team_helpers/filter_logic.test.tsx	Adds a targeted regression test that passes a fresh array reference on every render; the test would throw and fail without the fix, confirming the loop guard works correctly.

_{Reviews (1): Last reviewed commit: "fix(ui): stop Virtual Keys page from inf..." | Re-trigger Greptile}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[BroderickHigby]

{"linked_issue":null,"fix_shapes":["other"],"merge_gate":{"safe_for_high_rps_gateway":"yes","one_liner":"Merge: this is a narrow UI render-loop fix with a hook-level bailout plus caller memoization and no gateway request-path blast radius.","unintended_consequences":["The shallow equality bailout preserves the previous filtered array reference when the same key objects are in the same order, which is the intended no-op render behavior.","If callers mutate key objects in place, this bailout will still treat the list as unchanged; that matches React state identity expectations and is not introduced as a new data path here."],"hot_path_notes":["Dashboard-only React hook path; no proxy, auth, model list, routing, streaming, or provider transform path touched."],"what_would_make_yes":"Already yes."},"findings":[]}