Skip to content

fix(watermelon): prevent room list query flicker on connection status change#7439

Open
Shevilll wants to merge 1 commit into
RocketChat:developfrom
Shevilll:fix/watermelon-flicker-7093
Open

fix(watermelon): prevent room list query flicker on connection status change#7439
Shevilll wants to merge 1 commit into
RocketChat:developfrom
Shevilll:fix/watermelon-flicker-7093

Conversation

@Shevilll

@Shevilll Shevilll commented Jun 25, 2026

Copy link
Copy Markdown

Problem

In useSubscriptions.ts, the server state was retrieved using const server = useAppSelector(state => state.server);.
Since the state.server object contains several properties including the connection status (loading, connecting, etc.), any transition in connection state (e.g., from connecting to connected) triggers a state update. This state update causes useSubscriptions to re-evaluate, triggering a complete re-query of WatermelonDB for the list of rooms, which results in a highly visible and disruptive UX flicker.

Solution

We restrict the selector dependency to only track state.server.server (the actual server URL). This ensures that simple connection status transitions (which do not change the active server URL) do not trigger unnecessary WatermelonDB queries or UI flickers.

Closes #7093

Summary by CodeRabbit

  • Bug Fixes
    • Improved subscription updates so they refresh when the server connection changes, helping keep live data in sync more reliably.

@coderabbitai

coderabbitai Bot commented Jun 25, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f482fd76-c725-4143-b461-b2c5b89a9687

📥 Commits

Reviewing files that changed from the base of the PR and between da389be and 7087fb4.

📒 Files selected for processing (1)
  • app/views/RoomsListView/hooks/useSubscriptions.ts
📜 Recent review details
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{js,ts,jsx,tsx}: Use descriptive names for functions, variables, and classes that clearly convey their purpose
Write comments that explain the 'why' behind code decisions, not the 'what'
Keep functions small and focused on a single responsibility
Use const by default, let when reassignment is needed, and avoid var
Prefer async/await over .then() chains for handling asynchronous operations
Use explicit error handling with try/catch blocks for async operations
Avoid deeply nested code; refactor complex logic into helper functions

Files:

  • app/views/RoomsListView/hooks/useSubscriptions.ts
**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Use TypeScript for type safety; add explicit type annotations to function parameters and return types
Prefer interfaces over type aliases for defining object shapes in TypeScript
Use enums for sets of related constants rather than magic strings or numbers

Use TypeScript with strict mode enabled

Files:

  • app/views/RoomsListView/hooks/useSubscriptions.ts
**/*.{js,jsx,ts,tsx,json}

📄 CodeRabbit inference engine (CLAUDE.md)

Use Prettier formatting with tabs, single quotes, 130 character line width, no trailing commas, and avoid arrow function parentheses

Files:

  • app/views/RoomsListView/hooks/useSubscriptions.ts
**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Enforce ESLint rules from @rocket.chat/eslint-config with React, React Native, TypeScript, and Jest plugins

Files:

  • app/views/RoomsListView/hooks/useSubscriptions.ts
app/views/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Place screen components in 'app/views/' directory

Files:

  • app/views/RoomsListView/hooks/useSubscriptions.ts
🧠 Learnings (1)
📚 Learning: 2026-04-30T17:07:51.020Z
Learnt from: diegolmello
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7274
File: app/lib/services/voip/MediaCallEvents.ts:0-0
Timestamp: 2026-04-30T17:07:51.020Z
Learning: In this Rocket.Chat React Native codebase, the ESLint rule `no-void: error` is enforced. When you see a promise returned from an async call that is not awaited (a “floating promise”), do not silence it with the `void somePromise()` pattern. Instead, handle the promise explicitly by attaching `.catch(...)` (or otherwise awaiting/handling the error) so unhandled-rejection risks are addressed in a way that satisfies the existing ESLint configuration.

Applied to files:

  • app/views/RoomsListView/hooks/useSubscriptions.ts
🔇 Additional comments (1)
app/views/RoomsListView/hooks/useSubscriptions.ts (1)

42-42: LGTM!

Also applies to: 127-127


Walkthrough

The rooms subscription hook now depends on the nested server value instead of the full server Redux object, changing when the WatermelonDB subscription effect re-runs.

Changes

Rooms list subscription dependency

Layer / File(s) Summary
Effect dependency uses nested server state
app/views/RoomsListView/hooks/useSubscriptions.ts
The subscription effect now reads state.server.server instead of state.server for its dependency value.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Suggested labels

type: bug

Suggested reviewers

  • diegolmello
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly matches the change: narrowing the WatermelonDB subscription dependency to avoid room list flicker on connection changes.
Linked Issues check ✅ Passed The PR satisfies #7093 by depending on the actual server URL instead of the full server object, preventing re-queries on connection state transitions.
Out of Scope Changes check ✅ Passed The change is narrowly scoped to the reported subscription dependency bug and introduces no unrelated modifications.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)
  • FLICKER-7093: Request failed with status code 401

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

1 participant