RocketChat / RocketChat/EmbeddedChat

Bug: Message list order flips on every re-render due to in-place array mutation

Open
#1,224 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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
  1. Open any EmbeddedChat instance with an active room that has messages
  2. Start typing in the chat input box (this triggers a re-render)
  3. Observe the message list — the order of messages flips with each keystroke
  4. 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.