Describe the bug
The FaqChatbot component stores all messages in an unbounded array state without any cleanup mechanism. During extended usage, this causes the messages array to grow indefinitely, consuming increasing amounts of browser memory and eventually degrading application performance. After hundreds of messages, users may experience lag, slowdowns, or browser crashes.
Location: src/components/FaqChatbot.jsx (lines 8-9, 27-31)
Root Cause: The component uses setMessages(prev => [...prev, { text: userMessage, sender: 'user' }]) and setMessages(prev => [...prev, { text: botResponse, sender: 'bot' }]) without any maximum limit or cleanup logic.
To Reproduce
Steps to reproduce the behavior:
- Open the application and locate the FaqChatbot widget (usually bottom-right corner)
- Click to open the chatbot
- Send multiple messages (type any questions and submit repeatedly)
- Continue sending messages for an extended period (e.g., 100+ messages)
- Open browser DevTools → Memory tab
- Take a heap snapshot
- Notice the increasing memory consumption in the React component state
- Experience slowdown in browser responsiveness
Faster reproduction:
- Use browser console to simulate:
// Find the chatbot component and trigger multiple messages programmatically
for(let i = 0; i < 100; i++) {
// Simulate user messages
}
### Expected behavior
### Expected behavior
```markdown
The messages array should have a maximum capacity (e.g., 50-100 messages) to prevent unbounded growth. When the limit is reached, older messages should be automatically removed (FIFO - First In, First Out).
**Expected implementation:**
```javascript
setMessages(prev => {
const updated = [...prev, { text: botResponse, sender: 'bot' }];
// Keep only last 50 messages
return updated.length > 50 ? updated.slice(-50) : updated;
});
### Additional context
### Additional context
```markdown
**Impact:**
- **Severity:** Medium
- **Affected Users:** Anyone using the chatbot for extended periods
- **Browser Memory:** Can grow to hundreds of MB with enough messages
- **Performance:** Causes React re-render slowdowns as array grows
**Affected Code:**
- File: `src/components/FaqChatbot.jsx`
- Lines: 8-9 (state initialization), 27-31 (message addition)
**Suggested Fix:**
Implement a message cap with automatic cleanup:
```javascript
const MAX_MESSAGES = 50;
setMessages(prev => {
const updated = [...prev, newMessage];
return updated.length > MAX_MESSAGES ? updated.slice(-MAX_MESSAGES) : updated;
});
Describe the bug
The FaqChatbot component stores all messages in an unbounded array state without any cleanup mechanism. During extended usage, this causes the messages array to grow indefinitely, consuming increasing amounts of browser memory and eventually degrading application performance. After hundreds of messages, users may experience lag, slowdowns, or browser crashes.
Location:
src/components/FaqChatbot.jsx(lines 8-9, 27-31)Root Cause: The component uses
setMessages(prev => [...prev, { text: userMessage, sender: 'user' }])andsetMessages(prev => [...prev, { text: botResponse, sender: 'bot' }])without any maximum limit or cleanup logic.To Reproduce
Steps to reproduce the behavior:
Faster reproduction: