refactor: Add React.memo and memoize expensive computations #3128
Conversation
Improve rendering performance by memoizing expensive operations that were running on every render. These optimizations reduce unnecessary re-renders and expensive computations in list components. Changes: - ValidatorList Item: Wrap component with React.memo to prevent unnecessary re-renders when props haven't changed (affects 100+ list items) - NominationList: Memoize JSON.stringify operation for pageKey generation - GenerateNominations: Memoize JSON.stringify for nominations comparison - ValidatorList: Memoize address array extraction to prevent unnecessary hook re-executions
There was a problem hiding this comment.
Pull request overview
This PR introduces React performance optimizations through strategic use of React.memo and useMemo to reduce unnecessary re-renders and expensive computations in validator list components. The changes target components that render large lists (100+ items) and perform repeated expensive operations like JSON stringification.
Key Changes:
- Wrapped
ValidatorListItem component withReact.memoto prevent re-renders when props haven't changed - Memoized JSON.stringify operations in
NominationListandGenerateNominationsto avoid redundant serialization on every render - Memoized address array extraction in
ValidatorListto prevent unnecessary hook re-executions
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/app/src/library/ValidatorList/Item.tsx | Wraps Item component with React.memo to optimize list rendering performance |
| packages/app/src/library/ValidatorList/index.tsx | Memoizes validator address array extraction to prevent unnecessary hook calls |
| packages/app/src/library/NominationList/index.tsx | Memoizes JSON.stringify operation for pageKey generation |
| packages/app/src/library/GenerateNominations/index.tsx | Memoizes JSON.stringify operations for nominations comparison and updates useEffect dependencies |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <[email protected]>
|
@rossbulat I've opened a new pull request, #3129, to work on those changes. Once the pull request is ready, I'll request review from you. |
…#3129) Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: rossbulat <[email protected]>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <[email protected]>
|
@rossbulat I've opened a new pull request, #3131, to work on those changes. Once the pull request is ready, I'll request review from you. |
Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: rossbulat <[email protected]>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Improve rendering performance by memoizing expensive operations that were running on every render. These optimisations reduce unnecessary re-renders and expensive computations in list components.
Changes: