perf(render): Memoize PinnedRepos and TopRepos Components to Prevent Redundant Re-Renders

[omkhandare55]

Description

In our developer dashboard, whenever a global statistics sync triggers (via SSE in DashboardSSEProvider), both the PinnedRepos.tsx and TopRepos.tsx components completely re-render all repo cards, even when the contribution counts or items remain unchanged. This results in heavy UI thread thrashing on active profiles. We need to memoize these cards.

Requirements

1. Component Memoization: Wrap PinnedRepos and TopRepos individual cards with React.memo using a strict key equality comparator.
2. Computation Caching: Cache heavy sorting algorithms for top/pinned lists using the useMemo hook.

Files to Modify

• src/components/PinnedRepos.tsx
• src/components/TopRepos.tsx

[omkhandare55]

i would like to work on this issue under gssoc'26

[github-actions]

Assigned to @omkhandare55! You have 7 days to open a PR. No PR after 7 days = auto-unassigned so others can pick it up. Good luck!

[github-actions]

Hey @omkhandare55 — this issue was assigned 7 days ago with no PR opened. Unassigning so others can pick it up.

Still working on it? Drop a comment and request re-assignment.

[Antra1705]

I would like to work on this issue
In PinnedRepos.tsx and TopRepos.tsx, I'd wrap individual repo card subcomponents with React.memo using a custom comparator that does shallow equality on repo.id, repo.name, and repo.contributions — skipping re-renders when SSE syncs don't change those values. The sorting logic for top/pinned lists gets moved into useMemo with the repo array as dependency, preventing recalculation on unrelated parent re-renders. Built similar memoization patterns in ZerodhaClone where real-time Socket.io updates caused identical re-render thrashing.
Contributing under GSSoC '26. Could you please assign this to @Antra1705?

[github-actions]

Assigned to @Antra1705! You have 7 days to open a PR. No PR after 7 days = auto-unassigned so others can pick it up. Good luck!