fix: improve message scroll performance by optimizing FlatList and me… #186
Conversation
…moizing Message component
WalkthroughThe Changes
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/messages/Message.tsx(1 hunks)
🔇 Additional comments (2)
components/messages/Message.tsx (2)
111-117: Be careful with incomplete message comparison.The comparison only checks
message.idbut ignores other message properties likebody,media, etc. If any content within the message changes but the ID remains the same, the component won't update.Consider whether this is intentional. If message content could change while maintaining the same ID in your application flow, this optimization might cause stale UI.
119-119: Good optimization for scroll performance.Using React.memo with a custom comparison function is an excellent approach to optimize rendering performance in list components.
To measure the impact of this optimization, consider testing with React DevTools Profiler before and after the change with a large message list.
| // 🔁 Prevent unnecessary re-renders for better scroll performance | ||
| function areEqual(prevProps: Props, nextProps: Props) { | ||
| return ( | ||
| prevProps.message.id === nextProps.message.id && | ||
| prevProps.openImage === nextProps.openImage && | ||
| prevProps.openVideo === nextProps.openVideo | ||
| ); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider including isLeft in your comparison function.
The areEqual function only checks message.id, openImage, and openVideo, but doesn't check isLeft which affects message layout positioning. If isLeft changes, the message won't re-render with this implementation.
function areEqual(prevProps: Props, nextProps: Props) {
return (
prevProps.message.id === nextProps.message.id &&
prevProps.openImage === nextProps.openImage &&
+ prevProps.isLeft === nextProps.isLeft &&
prevProps.openVideo === nextProps.openVideo
);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // 🔁 Prevent unnecessary re-renders for better scroll performance | |
| function areEqual(prevProps: Props, nextProps: Props) { | |
| return ( | |
| prevProps.message.id === nextProps.message.id && | |
| prevProps.openImage === nextProps.openImage && | |
| prevProps.openVideo === nextProps.openVideo | |
| ); | |
| } | |
| // 🔁 Prevent unnecessary re-renders for better scroll performance | |
| function areEqual(prevProps: Props, nextProps: Props) { | |
| return ( | |
| prevProps.message.id === nextProps.message.id && | |
| prevProps.openImage === nextProps.openImage && | |
| prevProps.isLeft === nextProps.isLeft && | |
| prevProps.openVideo === nextProps.openVideo | |
| ); | |
| } |
1 participant
This PR improves the scrolling experience in the chat screen.
Replaced or optimized the FlatList rendering in MessagesList.tsx
Introduced React.memo() with a custom comparison function in Message.tsx
Improved render batching and reduced unnecessary re-renders
Fixes issue #172
Summary by CodeRabbit