bug: ReferenceError: setDebouncedSearch is not defined when clicking 'Clear All' on Practice Page

[coderabbitai]

Bug Report

Reported by: @kunalverma2512
Related PR: #158 (comment)

---

Summary

Clicking the "Clear All" button (or "Clear All Filters" button) on the Practice Page crashes with a ReferenceError in the browser console. The page becomes unresponsive to filter clearing.

---

Browser Console Error

index-CyhY7F8s.js:105 Uncaught ReferenceError: setDebouncedSearch is not defined
    at N (index-CyhY7F8s.js:105:54932)
    at Td (index-CyhY7F8s.js:8:126341)
    at index-CyhY7F8s.js:8:131334
    at un (index-CyhY7F8s.js:8:15081)
    at Ad (index-CyhY7F8s.js:8:127568)
    at _p (index-CyhY7F8s.js:9:28475)
    at hp (index-CyhY7F8s.js:9:28297)

---

Steps to Reproduce

1. Go to the Practice Page (the page listing Codeforces problems).
2. Type something in the search box, or select a tag/rating filter.
3. Click the "Clear All" button that appears in the active filter chips area, or click "Clear All Filters" in the no-results state.
4. Observe the ReferenceError in the browser DevTools console (F12 → Console tab).

---

Root Cause (Technical Explanation for Contributors)

File: frontend/src/pages/PracticePage.jsx

The useDebounce hook is used to delay the search query update so that the problems list does not re-filter on every single keystroke:

// Line 203
const debouncedSearch = useDebounce(searchQuery, 300);

The useDebounce hook returns only the debounced value — it does not expose a setter function. This is the standard pattern for debounce hooks in React: you own the source state (searchQuery / setSearchQuery), and the hook derives a delayed read-only copy from it.

However, the clearAll function (around line 333) incorrectly tries to call a non-existent setDebouncedSearch setter:

const clearAll = () => {
  setSearchQuery("");       // ✅ Correct — resets the source state
  setDebouncedSearch("");   // ❌ Bug — this function does not exist anywhere!
  setSelectedTags([]);
  setRatingIdx(0);
  setSortBy("rating-asc");
};

Because setDebouncedSearch is never declared or imported, JavaScript throws a ReferenceError the moment clearAll is invoked — preventing any of the reset logic below it from executing.

---

Why Does the Filter Look Like It Doesn't Clear Immediately?

When setSearchQuery("") is called, the debounce timer starts. After 300 ms, debouncedSearch will automatically become "" and the problem list will re-filter correctly. So the manual setDebouncedSearch("") call was likely added in an attempt to make the clear feel instant — but since the function doesn't exist, it breaks everything instead.

---

Suggested Fix

Simply remove the invalid setDebouncedSearch("") call from the clearAll function. Resetting searchQuery via setSearchQuery("") is sufficient; debouncedSearch will follow automatically within 300 ms:

const clearAll = () => {
  setSearchQuery("");
  // Remove: setDebouncedSearch("");  ← this line causes the crash
  setSelectedTags([]);
  setRatingIdx(0);
  setSortBy("rating-asc");
};

If an instant (zero-delay) clear is preferred UX-wise, the useDebounce hook (frontend/src/hooks/useDebounce.js) can be extended to return a [debouncedValue, setValue] tuple — similar to how useState works — so callers can manually override the debounced value when needed.

---

Affected Buttons

There are two buttons that both call clearAll:

1. The inline "Clear All" chip that appears next to active filter badges (line ~515).
2. The "Clear All Filters" button shown in the empty-results state (line ~570).

Both are broken by this bug.

---

Environment

• File: frontend/src/pages/PracticePage.jsx
• Hook: frontend/src/hooks/useDebounce.js (or .ts)
• Framework: React (Vite build, minified output index-CyhY7F8s.js)

---

Acceptance Criteria

• Clicking "Clear All" clears search, tags, rating, and sort without any console errors.
• The problems list resets correctly after clearing.
• No regression to the debounce behaviour during normal typing.