RocketChat / RocketChat/EmbeddedChat
Bug: Message list order flips on every re-render due to in-place array mutation
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 165
- Forks
- 381
- Avg merge
- 1d 2h
- Merged PRs (30d)
- 1
Description
Description
In MessageList.js, the filteredMessages array is reversed using .reverse() directly — which mutates the array in-place. Since the same array reference can be reused across renders, every re-render flips the message order back and forth, causing visible ordering issues in the chat UI.
File: packages/react/src/views/MessageList/MessageList.js — line 81
Steps to Reproduce
- Open any EmbeddedChat instance with an active room that has messages
- Start typing in the chat input box (this triggers a re-render)
- Observe the message list — the order of messages flips with each keystroke
- Alternatively, trigger any state update (e.g., emoji picker open/close) and observe the same flip
Expected Behavior
The message list should maintain a stable, consistent order across re-renders. Typing or any unrelated state update should not affect the order of displayed messages.
Actual Behavior
The message list reverses its order on every re-render. Messages that were newest-at-bottom appear newest-at-top on the next render, and vice versa. "New day" date dividers and sequential message groupings also break because prev/next neighbor calculations are done on the mutated array.
Environment
- Affects all environments (browser, embedded)
- Reproducible in both development and production builds
- No specific OS or browser dependency
Additional Information
Root Cause:
Array.prototype.reverse() mutates the original array in-place. When the same array reference is reused between renders (via useMemo or .filter() returning the same ref), each render toggles the order.
Buggy code:
filteredMessages
.reverse()
.map((msg, index, arr) => { ... })
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in packages/react/src/views/MessageList/MessageList.js around line 81 and inspect how filteredMessages is handled before mapping. Reproduce the issue by typing in the chat input or triggering another state update, then verify that message order, date dividers, and sequential groupings remain stable across re-renders.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 55/100