Bug: Room list query flickers on every connection state change

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#7,437 1 bình luận 1 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
1/5
Thời gian dự kiến
Dưới một giờ
Mức phù hợp với người mới
86/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
react-native, typescript
Lĩnh vực
mobile

Hướng nghiên cứu

Đọc app/views/RoomsListView/hooks/useSubscriptions.ts, tập trung vào lời gọi useAppSelector và mảng dependency của useEffect. Thu hẹp selection xuống URL của server đang hoạt động, sau đó xác minh rằng các thay đổi về trạng thái kết nối không còn kích hoạt việc truy vấn lại room list hoặc tạo lại subscription, trong khi các thay đổi của server vẫn tiếp tục làm như vậy.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

type: bug
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.

Ngôn ngữ chính
TypeScript
Star
2.4k
Fork
1.5k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
29

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của RocketChat/Rocket.Chat.ReactNative

Tất cả issue của RocketChat/Rocket.Chat.ReactNative

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.