Memoize MyCommitmentsGrid and MarketplaceGrid cards to remove re-render jank on filtering

[1nonlypiece]

📌 Description

src/components/MyCommitmentsGrid.tsx and src/components/MarketplaceGrid.tsx
re-render every card on each filter/sort change because card components are not
memoized and inline callbacks/derived data are recreated on each render. With
large lists this produces visible jank during filtering.

This issue memoizes card components and stabilizes derived data/callbacks so only
changed cards re-render.

🎯 Requirements and Context

• Wrap MyCommitmentCard and MarketplaceCard in React.memo with stable props.
• Memoize filtered/sorted derivations with useMemo; stabilize callbacks with
  useCallback.
• Use stable keys (not array index) for list items.
• No behaviour change; measurable reduction in re-renders.

🛠️ Suggested Execution

1. Fork the repo and create a branch

git checkout -b perf/memoize-grids

2. Implement changes

• Apply memoization to the two grids and their cards.
• Add src/components/__tests__/GridMemoization.test.tsx using render counters /
  spies to assert unchanged cards do not re-render on filter changes.
• Add docs/performance/GRID_RENDER.md documenting the before/after render counts.
• Validate filtering/sorting still works identically.

3. Test and commit

• Run pnpm test.
• Cover edge cases: empty results, single-item change, full-list change,
  sort-only change.

Example commit message

perf: memoize MyCommitmentsGrid and MarketplaceGrid cards

✅ Guidelines

• Minimum 95% test coverage on new/changed lines.
• Clear, reviewer-friendly documentation.
• Timeframe: 96 hours.

🏷️ Labels

type-performance · area-frontend · MAYBE REWARDED · GRANTFOX OSS ·
OFFICIAL CAMPAIGN

💬 Community & Support

• Join the CommitLabs contributor Discord to coordinate and get unblocked fast:
  https://discord.gg/WV7tdYkJk
• Introduce yourself before starting so we can avoid duplicate work and pair you
  with a reviewer. Maintainers triage actively and review fast.

[adepoju2006]

@adepoju2006 has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I have experience eliminating re-render jank in React grids using React.memo, useMemo, and stable callback references. I'll audit the filter-triggered render chain for both grids, memoize card components correctly, and verify the fix with React DevTools Profiler to confirm jank is fully eliminated.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @adepoju2006 to this issue.

[GBOYEE]

I'd like to work on this.

Approach:

• I'll analyze the codebase and implement a clean solution
• Verify with existing tests + add new ones if needed

Estimated effort: ~1-2 hours. PR incoming shortly.

[GBOYEE]

I'd like to work on this.

Approach:

• I'll analyze the codebase and implement a clean solution
• Verify with existing tests + add new ones if needed

Estimated effort: ~1-2 hours. PR incoming shortly.

[GBOYEE]

I'd like to work on this issue.

My Approach

• Analyze the root cause of: ##
• Implement a clean, tested fix
• Follow existing code patterns and conventions

Files Likely Modified

• TBD after analysis

Timeline

• Estimated completion: 15-30 minutes
• PR will be submitted with tests and documentation

Closes #659