Critical Performance: Message components re-render excessively causing UI lag

[BP602]

🚨 Critical Performance Issue

The Message component and its children are re-rendering excessively, causing significant performance degradation in the chat interface.

Current Problem

• Message.jsx is NOT memoized - Every message re-renders on any state change
• Support events log 10+ renders per single event
• Each new message or scroll triggers re-render of ALL visible messages
• Causes UI lag, stuttering, and poor user experience

Evidence

// SupportEventMessage was logging this 10+ times per event:
[SupportEventMessage] Reward event data: {message: {…}, metadata: {…}, eventType: 'reward'}

Performance Impact

• 🐌 Chat scrolling lag
• 🔋 Excessive CPU/battery usage
• 💾 Memory pressure from constant re-renders
• ⚡ Poor real-time chat experience

Root Cause Analysis

1. Message.jsx (line 25): const Message = ({ - Not wrapped in memo()
2. Child components re-render even when props haven't changed
3. Virtualized list triggers unnecessary re-renders during scroll
4. State changes in ChatProvider cause cascade re-renders

Proposed Solution

// Message.jsx
import { memo } from 'react';

const Message = memo(({ message, userChatroomInfo, chatroomId }) => {
  // ... component logic
});

export default Message;

Additional Optimizations Needed

• Add memo() to all message child components
• Implement proper dependency arrays for hooks
• Consider useMemo for expensive computations
• Audit ChatProvider state changes

Priority

High - Directly impacts user experience and system performance

Related Components

• Message.jsx (main issue)
• SupportEventMessage.jsx
• RegularMessage.jsx
• ModActionMessage.jsx
• MessagesHandler.jsx
• ChatProvider.jsx