[HIGH] Memoize filteredSubscriptions in App.tsx - prevent recomputation on every keystroke #33

New issue

Closed

opened 2026-06-09 00:03:13 +00:00 by Mark · 0 comments

Mark commented

2026-06-09 00:03:13 +00:00

Owner

Location: src/App.tsx:364-368

Problem: filteredSubscriptions is recomputed on every render by scanning the full subscriptions array with 2x .toLowerCase() per item. Combined with uncontrolled AuthContext re-renders, this fires on every state change.

Impact: Linear scan over full array on every keystroke + every parent state change.

Fix:

const filteredSubscriptions = useMemo(
  () => subscriptions.filter((sub) =>
    sub.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
    sub.category.toLowerCase().includes(searchQuery.toLowerCase())
  ),
  [searchQuery, subscriptions]
);

Effort: ~30 mins

**Location:** `src/App.tsx:364-368` **Problem:** `filteredSubscriptions` is recomputed on every render by scanning the full subscriptions array with 2x `.toLowerCase()` per item. Combined with uncontrolled AuthContext re-renders, this fires on every state change. **Impact:** Linear scan over full array on every keystroke + every parent state change. **Fix:** ```ts const filteredSubscriptions = useMemo( () => subscriptions.filter((sub) => sub.name.toLowerCase().includes(searchQuery.toLowerCase()) || sub.category.toLowerCase().includes(searchQuery.toLowerCase()) ), [searchQuery, subscriptions] ); ``` **Effort:** ~30 mins