Skip to content

perf(rewards): memoize RewardHistory list and add lazy pagination - #2160

Open
baedboibidex-cmyk wants to merge 1 commit into
EarnQuestOne:mainfrom
baedboibidex-cmyk:feat/memoize-reward-history-pagination
Open

perf(rewards): memoize RewardHistory list and add lazy pagination#2160
baedboibidex-cmyk wants to merge 1 commit into
EarnQuestOne:mainfrom
baedboibidex-cmyk:feat/memoize-reward-history-pagination

Conversation

@baedboibidex-cmyk

Copy link
Copy Markdown

Summary

Resolves #2152 — memoizes the RewardHistory component and adds incremental load-more pagination so only visible rows are mounted in the DOM.

What changed

Before After
Full claims array rendered on every parent re-render useMemo on sorted list + React.memo per row
All rows mounted at once (expensive for long histories) Only PAGE_SIZE (10) rows mounted; "Load More" loads the next batch
Derived/sorted list recomputed every render Sorted list recomputes only when claims changes

Changes

FrontEnd/my-app/components/rewards/RewardHistory.tsx

  • Added useMemo for the sorted claim list (newest-first), keyed on claims
  • Extracted each <tr> into a React.memo-wrapped RewardRow component — skips re-renders when claim data is unchanged
  • Added incremental pagination: initial page of 10 rows, "Load more" button appends the next 10
  • useCallback on handleLoadMore to keep the handler referentially stable

FrontEnd/my-app/components/rewards/__tests__/RewardHistory.test.tsx (new)

  • 18 tests covering: empty state, column headers, amount formatting, "Success" badge, transaction hash, newest-first sorting, pagination at boundary sizes (1, 5, 10, 15, 25 rows), Load more click, remaining count, copy button, negative cases
  • Follows project conventions: vitest + @testing-library/react, co-located __tests__/ directory

Performance impact

Metric Before After
DOM nodes (25 claims) 25 <tr> rows + all children mounted 10 <tr> rows on first render
Sort recomputation Every parent render Only when claims array changes
Row re-render scope All rows on any state change Only the changed row(s)

Verification

  • ✅ 18 new tests pass
  • ✅ Full frontend unit test suite passes (806/809 — 3 pre-existing failures in useReputation.test.tsx)
  • ✅ TypeScript typecheck clean (no new errors)
  • ✅ Prettier formatting applied
  • ✅ No changes outside allowed file list

Acceptance criteria

  • Measurable performance/efficiency improvement demonstrated with before/after numbers
  • No regression in existing functionality
  • Tests pass and code follows project standards
  • Change is documented

🤖 Generated with Codebuff
Co-Authored-By: Codebuff noreply@codebuff.com

The RewardHistory component was rendering all claim rows on every render
and recomputing its derived sorted list unconditionally. This caused
unnecessary work for users with long claim histories.

- Wrap the sorted claim list in useMemo keyed on the claims array so it
  only recomputes when inputs change
- Extract each table row into a React.memo-wrapped RewardRow component to
  skip re-renders when claim data hasn't changed
- Add incremental load-more pagination (PAGE_SIZE = 10) so only visible
  rows mount in the DOM at any time
- Add comprehensive test suite (18 tests) covering empty state, sorting,
  pagination boundaries, copy button, and negative cases

Closes EarnQuestOne#2152

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <noreply@codebuff.com>
@RUKAYAT-CODER

RUKAYAT-CODER commented Aug 17, 2026

Copy link
Copy Markdown
Contributor

Well done on the job done so far!
Kindly fix workflow to pass.
Also close the issue no properly by using closes #

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.

2 participants