RocketChat / RocketChat/Rocket.Chat.ReactNative

Bug: Room list query flickers on every connection state change

Open Beginner friendly
#7,437 1 comment 1 reaction 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

Description

useSubscriptions triggers active WatermelonDB room list queries every time connection status transitions (e.g., from connecting to connected, or loading to not loading), even if subscription records are unmodified. This leads to room list query flickering on every connection state change.

Cause

In app/views/RoomsListView/hooks/useSubscriptions.ts, the hook selects the entire state.server object:

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

Since state.server contains fields like connecting, loading, and others that change as the connection state changes, selecting the entire state.server object causes the useEffect inside useSubscriptions.ts to trigger on every connection status change because its dependency array includes server:

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

This forces the hook to re-query WatermelonDB and recreate the subscription, causing a visible flicker in the room list on every connection state transition.

Solution

Narrow the selector in useSubscriptions.ts to select only the server URL instead of the entire server state:

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

This ensures that the useEffect is only triggered when the active server actually changes, and not when the connection state of the current server transitions.

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

Read app/views/RoomsListView/hooks/useSubscriptions.ts, focusing on the useAppSelector call and the useEffect dependency array. Narrow the selection to the active server URL, then verify that connection-state changes no longer trigger room-list re-queries or subscription recreation while server changes still do.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
1/5
Estimated time
Under an hour
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
86/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.