fix: prevent state mutation in Leaderboard useMemo by using immutable…

[jikrana1]

Addressed Issues:

Fixes #553

Additional Notes:

Code Changes (Before vs After):

Before (Problematic — mutating original state):

const sorted = [...debaters];
if (sortCategory) {
  sorted.sort((a, b) => b.score - a.score);
}
sorted.forEach((debater, index) => {
  debater.rank = index + 1; // ❌ Direct mutation of state object
});
return sorted;

After (Fixed — immutable update):

const sorted = [...debaters];
if (sortCategory) {
  sorted.sort((a, b) => {
    if (sortCategory === "score") return b.score - a.score;
    return b.rating - a.rating;
  });
}
return sorted.map((debater, index) => ({
  ...debater,       //  Create new object
  rank: index + 1,  //  Immutable rank assignment
}));

Why this fix is needed:

• [...debaters] only creates a shallow copy of the array — the object references inside remain the same as the original state.
• The previous forEach loop was mutating debater.rank directly, which modified the original state objects in place.
• This violates React's immutability principle. Because the object references never changed, React could not detect any state change, leading to:
  1. Stale UI during live WebSocket score_updated events (rank not recalculating).
  2. Incorrect rank calculations when the sorting category is toggled.
  3. Broken time-travel debugging in React DevTools.

Verification:

• Tested locally by sorting the leaderboard (via "VS BOT" and "ELO RATING" headers) while inspecting the debaters state in React DevTools.
• Confirmed that the original debaters state objects remain unmutated, and only sortedDebaters reflects the updated ranks.

Checklist

• My PR addresses a single issue, fixes a single bug or makes a single improvement.
• My code follows the project's code style and conventions
• If applicable, I have made corresponding changes or additions to the documentation
• If applicable, I have made corresponding changes or additions to tests
• My changes generate no new warnings or errors
• I have joined the Discord server and I will share a link to this PR with the project maintainers there
• I have read the Contribution Guidelines
• Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.
• I have filled this PR template completely and carefully, and I understand that my PR may be closed without review otherwise.

Summary by CodeRabbit

• Bug Fixes
  • Improved leaderboard ranking updates to ensure positions are assigned consistently without altering the underlying debater data.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 7c48324f-c3e9-4bd9-a577-6e6688bbf6c3

📥 Commits

Reviewing files that changed from the base of the PR and between 9f90f9b and 8197ce0.

📒 Files selected for processing (1)

• frontend/src/Pages/Leaderboard.tsx

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The leaderboard ranking calculation now returns copied debater objects with updated ranks. It no longer mutates the original debater objects during sorting.

Changes

Leaderboard ranking

Layer / File(s)	Summary
Immutable rank assignment frontend/src/Pages/Leaderboard.tsx	sortedDebaters now uses map to preserve each debater’s fields and assign rank as index + 1.

Priority: ⬆️ High

Estimated code review effort: 1 (Trivial) | ~5 minutes

Change: Bug fix · Severity of issue fixed: High

Merge Risk: ⚪ Minimal · up to 8197c

The immutable ranking change preserves leaderboard fields and updates correctly for sorting, category changes, and live score updates.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Issue #553 requires immutable leaderboard sorting and correct rank recalculation. In frontend/src/Pages/Leaderboard.tsx, the existing score/rating sort result now uses map to create a new object w…
Out of Scope Changes check	✅ Passed	The pull request changes only the rank assignment in Leaderboard.tsx. The change directly supports issue #553 and does not introduce unrelated UI, API, or state changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: preventing state mutation in the Leaderboard useMemo logic through immutable updates.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[gitcordapp]

Link your account with Gitcord

Thanks for opening this PR, @jikrana1!

To receive Discord notifications and contributor tracking for this organization:

1. Join Discord: https://discord.gg/hjUhu33uAn
2. In Discord, run /link jikrana1
3. Paste the verification code into your GitHub bio (or a public gist)
4. Click Verify in Discord (or run /verify-link jikrana1)

Once linked, Gitcord can notify you about reviews, merges, and more.

— Posted by Gitcord