Skip to content

Fix React Hook dependency warning in BookmarkCollections component - #1422

Open
sahare77 wants to merge 1 commit into
Canopus-Labs:mainfrom
sahare77:fix/bookmark-collection-deps
Open

Fix React Hook dependency warning in BookmarkCollections component#1422
sahare77 wants to merge 1 commit into
Canopus-Labs:mainfrom
sahare77:fix/bookmark-collection-deps

Conversation

@sahare77

@sahare77 sahare77 commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

Summary of What Has Been Done

Fixed a stale closure and React hook dependency warning in the BookmarkCollections component by ensuring all dependent variables are included in the hook's dependency array.

Changes Made

  • Modified rontend/src/pages/BookmarkCollections/BookmarkCollections.jsx: Added �ookmarkedQuestions to the dependency array.

Impact it Made

  • Resolves React warnings in the console during development.
  • Ensures the UI correctly and immediately re-renders when the user's bookmarks state changes, preventing stale data bugs.

Closes #1415

@coderabbitai

coderabbitai Bot commented Aug 6, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

Adds the BookmarkCollections React page. It displays collections, filtered interview questions, notes, statistics, and export/share controls. Search, company, and difficulty filters use local state and memoized filtering over static data.

Changes

Bookmark collections

Layer / File(s) Summary
Filtering and page controls
frontend/src/pages/BookmarkCollections/BookmarkCollections.jsx
Defines static bookmark data, filter state, memoized filtering, and search, company, and difficulty controls.
Collection and question views
frontend/src/pages/BookmarkCollections/BookmarkCollections.jsx
Renders collection cards and bookmarked questions with difficulty badges, companies, tags, and personal notes.
Statistics and actions
frontend/src/pages/BookmarkCollections/BookmarkCollections.jsx
Adds bookmark statistics, export, share, and tag-filter controls, then exports the page component.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related issues

Possibly related PRs

Suggested reviewers: jainiksha

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly describes the React Hook dependency warning fix in the BookmarkCollections component.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
frontend/src/pages/BookmarkCollections/BookmarkCollections.jsx (1)

39-92: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win

Move static bookmark data outside the component.

bookmarkedQuestions gets a new array reference on every render. Therefore, useMemo recalculates on every render and can still trigger the Hook dependency warning that this PR intends to fix.

Declare the static array at module scope. Then remove bookmarkedQuestions from the dependency array.

Proposed fix
+const bookmarkedQuestions = [
+  // ...
+];
+
 const BookmarkCollections = () => {
-  const bookmarkedQuestions = [
-    // ...
-  ];
-
   const filteredQuestions = useMemo(() => {
     return bookmarkedQuestions.filter((item) => {
       // ...
     });
-  }, [search, company, difficulty, bookmarkedQuestions]);
+  }, [search, company, difficulty]);
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/pages/BookmarkCollections/BookmarkCollections.jsx` around lines
39 - 92, Move the static bookmarkedQuestions array from the component body to
module scope so its reference remains stable across renders, then remove
bookmarkedQuestions from the filteredQuestions useMemo dependency array while
preserving the existing filtering logic.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/pages/BookmarkCollections/BookmarkCollections.jsx`:
- Around line 127-133: Update the button controls in BookmarkCollections so each
of the five buttons referenced at the shown locations has a working onClick
flow, including the required selected-collection and tag-filter state, or remove
controls whose actions are not implemented. Ensure no inert buttons remain and
preserve the intended collection and filtering behavior.

---

Nitpick comments:
In `@frontend/src/pages/BookmarkCollections/BookmarkCollections.jsx`:
- Around line 39-92: Move the static bookmarkedQuestions array from the
component body to module scope so its reference remains stable across renders,
then remove bookmarkedQuestions from the filteredQuestions useMemo dependency
array while preserving the existing filtering logic.
🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 544513aa-c464-4ecf-9506-1c28dfb4c9ac

📥 Commits

Reviewing files that changed from the base of the PR and between 8acb5b8 and eb29403.

📒 Files selected for processing (1)
  • frontend/src/pages/BookmarkCollections/BookmarkCollections.jsx

Comment on lines +127 to +133
<button className="flex items-center gap-2 bg-violet-600 hover:bg-violet-700 text-white px-5 py-3 rounded-xl font-semibold transition">

<Plus size={18} />

New Collection

</button>

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -e
file=$(git ls-files | grep -F 'frontend/src/pages/BookmarkCollections/BookmarkCollections.jsx' | head -n1)
printf 'FILE=%s\n' "$file"
wc -l "$file"
printf '\n--- target sections ---\n'
sed -n '1,240p' "$file"
sed -n '360,430p' "$file"
printf '\n--- related handlers and labels ---\n'
rg -n -C 3 'New Collection|Add|Export|Share|Tag|onClick|collection' "$file"

Repository: Canopus-Labs/PrepPilot

Length of output: 11835


🏁 Script executed:

#!/bin/bash
set -e
file="frontend/src/pages/BookmarkCollections/BookmarkCollections.jsx"
printf '%s\n' '--- question and collection sections ---'
sed -n '230,360p' "$file"
printf '%s\n' '--- component references and navigation ---'
rg -n -C 3 'BookmarkCollections|New Collection|Export Collection|Share Collection|Filter by Tags|Filter.*Tag|collection' frontend --glob '!**/node_modules/**'
printf '%s\n' '--- button handler inventory ---'
python3 - <<'PY'
from pathlib import Path
import re
p = Path("frontend/src/pages/BookmarkCollections/BookmarkCollections.jsx")
s = p.read_text()
for i, line in enumerate(s.splitlines(), 1):
    if "<button" in line or "onClick" in line or "onChange" in line:
        print(f"{i}: {line.strip()}")
PY

Repository: Canopus-Labs/PrepPilot

Length of output: 13476


🏁 Script executed:

#!/bin/bash
set -e
python3 - <<'PY'
from pathlib import Path
import re

path = Path("frontend/src/pages/BookmarkCollections/BookmarkCollections.jsx")
text = path.read_text()
lines = text.splitlines()

button_starts = [i for i, line in enumerate(lines) if "<button" in line]
print(f"button_count={len(button_starts)}")
for start in button_starts:
    end = start
    while end < len(lines) and "</button>" not in lines[end]:
        end += 1
    block = "\n".join(lines[start:end + 1])
    label = " ".join(re.findall(r">\s*([^<]+?)\s*<", block))
    print(f"lines={start + 1}-{end + 1} onClick={'onClick' in block} text={label!r}")

print(f"has_selected_collection_state={'selectedCollection' in text}")
print(f"has_tag_filter_state={'tag' in text.lower() and 'useState' in text}")
print(f"has_collection_selection_handler={'setSelected' in text or 'selectCollection' in text}")
PY

Repository: Canopus-Labs/PrepPilot

Length of output: 528


🏁 Script executed:

#!/bin/bash
set -e
python3 - <<'PY'
from pathlib import Path
import re

text = Path("frontend/src/pages/BookmarkCollections/BookmarkCollections.jsx").read_text()
state = re.findall(r'const\s+\[([^,\]]+),\s*([^\]]+)\]\s*=\s*useState\(([^)]*)\)', text)
print("state_declarations:")
for name, setter, initial in state:
    print(f"  {name.strip()} / {setter.strip()} / {initial.strip()}")

print("tag_filter_expressions:")
for line_no, line in enumerate(text.splitlines(), 1):
    if re.search(r'\btag(s)?\b', line, re.I):
        print(f"  {line_no}: {line.strip()}")
PY

Repository: Canopus-Labs/PrepPilot

Length of output: 502


Implement or remove inert action controls.

The five buttons at lines 127, 211, and 391-401 have no onClick handlers. The component has no selected-collection or tag-filter state. Connect each button to its intended flow, or remove it.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/pages/BookmarkCollections/BookmarkCollections.jsx` around lines
127 - 133, Update the button controls in BookmarkCollections so each of the five
buttons referenced at the shown locations has a working onClick flow, including
the required selected-collection and tag-filter state, or remove controls whose
actions are not implemented. Ensure no inert buttons remain and preserve the
intended collection and filtering behavior.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix React Hook dependency warning in BookmarkCollections component

1 participant