RocketChat / RocketChat/Rocket.Chat.ReactNative

bug: useSubscriptions re-queries WatermelonDB on every server connection state change, causing unnecessary rooms list flicker

Open Beginner friendly
#7,093 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

type: bug
Dominant language
TypeScript
Stars
2.4k
Forks
1.5k
Avg merge
1d 18h
Merged PRs (30d)
90

Description

app/views/RoomsListView/hooks/useSubscriptions.ts selects the entire server Redux object as a useEffect dependency:

const server = useAppSelector(state => state.server);

}, [isGrouping, sortBy, useRealName, showUnread, showFavorites, groupByType, roles, server]);

Since Redux reducers return a new object reference on every dispatch (even when only connecting or loading fields change), the useEffect fires on every server connection lifecycle transition — not just when the actual server URL changes.

Each spurious fire:

  1. Calls setLoading(true) — rooms list blanks out
  2. Unsubscribes the existing WatermelonDB observable
  3. Creates and subscribes a brand new observable
Steps to Reproduce
  1. Open the app on a slow or unstable network
  2. Watch the rooms list — it briefly flickers/shows a loading spinner multiple times even after rooms have already loaded
  3. Or: toggle airplane mode off → observe rooms list reload multiple times in quick succession
Expected Behavior

The WatermelonDB subscription should only be recreated when the server URL actually changes (i.e. user switches servers). Connection state transitions like connecting: true → false or loading: true → false should not cause the rooms list to re-query.

Actual Behavior

The useEffect fires 4 times during a single reconnection cycle, even though the server URL never changes. Each fire triggers a full WatermelonDB resubscribe and a setLoading(true) flash.

Rocket.Chat Server Version

Not applicable — this is a client-side bug

Rocket.Chat App Version

Latest main branch

Device Name

Any

OS Version

Any (iOS and Android)

Contributor guide

Open the contributing guide

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 with app/views/RoomsListView/hooks/useSubscriptions.ts and inspect the useEffect dependency list and the server state selected there. Reproduce the issue by toggling the network or connection state, then verify that the WatermelonDB subscription is recreated only when the server URL changes and that connection transitions no longer blank or flicker the rooms list.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
82/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.