Memoize and virtualize MyCommitmentsGrid and MarketplaceGrid to remove large-list render jank#1192
Open
greatest0fallt1me wants to merge 1 commit into
Open
Conversation
… remove large-list render jank - Wrap both grid components in React.memo to prevent re-renders when unrelated parent state changes; MyCommitmentCard and MarketplaceCard were already memoized. - Add useMemo-driven filterFn/sortFn props so derived lists are only recomputed when commitments/items or the predicate references change, eliminating redundant work on every parent render. - Apply CSS content-visibility: auto per card when list length exceeds 50 items — a zero-dependency windowing approach that lets the browser skip layout/paint for off-screen rows while preserving DOM for a11y and SSR. - Add tests/components/MyCommitmentsGrid.perf.test.tsx covering memoized re-render prevention, filter/sort correctness, empty/single/large list edge cases, and rapid filter toggling for both grid components. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
@greatest0fallt1me is attempting to deploy a commit to the 1nonly's projects Team on Vercel. A member of the Team first needs to authorize it. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #600
Summary
MyCommitmentsGridandMarketplaceGridinReact.memoto prevent re-renders when unrelated parent state changes (cards were already memoized viaReact.memo).useMemo-drivenfilterFn/sortFnprops so derived lists are only recomputed whencommitments/itemsor the predicate references change, eliminating redundant work on every parent render.content-visibility: autoper card when list length exceeds 50 items — a zero-dependency windowing approach that lets the browser skip layout/paint for off-screen rows while preserving DOM presence for accessibility and SSR compatibility.tests/components/MyCommitmentsGrid.perf.test.tsxcovering memoized re-render prevention, filter/sort correctness, empty/single/large-list edge cases, and rapid filter toggling for both grid components.Changes
src/components/MyCommitmentsGrid.tsx— memoized grid,useMemofor filterFn/sortFn, CSS windowing for large lists.src/components/MarketplaceGrid.tsx— same treatment;memo()wrapper,useMemo, CSS windowing.tests/components/MyCommitmentsGrid.perf.test.tsx— new perf/memoization test suite with 12 test cases covering both grid components.Test plan
npm test/pnpm test— all existing tests pass, new perf tests pass.MyCommitmentsGridSkeleton,MarketplaceGridSkeleton) are unaffected.filterFn/sortFnprops are optional (backwards-compatible; existing callers require no changes).🤖 Generated with Claude Code