Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

useFirestoreCollection triggers a double render

Đang mở
#484 4 bình luận 2 reaction 0 người được giao Xem trên GitHub

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

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
35/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
javascript, react
Lĩnh vực
database, frontend

Hướng nghiên cứu

Bắt đầu bằng cách tái hiện hành vi với trường hợp kiểm thử useFirestoreCollection và so sánh với hành vi tương tự của useUser. Kiểm tra các điểm vào của những hook đó để xác định tại sao việc fetch bằng Suspense khiến console.log chạy hai lần. Hoàn tất khi việc fetch dữ liệu tạo ra một lần render, còn các lần render sau chỉ xảy ra khi collection thay đổi.

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

Mô tả

v5

Hi,

Seems like useFirestoreCollection always triggers unnecessary render when fetching data (suspense is on). Similar behavior is also the case for useUser.
There's a chance I'm simply using the API wrong, so please advise if so :)

Version info

React: 17.0.2

Firebase: 9.1.3

ReactFire: 4.2.0

Test case
  const q = /* whatever query */;
  const queryResults = useFirestoreCollection(q);
  console.log(queryResults);
Expected behavior

console.log is called once.

Actual behavior

console.log is called twice.

Ultimately, what I'm trying to achieve is a code similar to the one below

const queryResults = useFirestoreCollection(query);
return queryResults.data.docs.map((d) => /* render */);

that renders only once when the data is fetched (and then only when there're changes in the collection).

Ngôn ngữ chính
TypeScript
Star
3.6k
Fork
403
Merge trung bình
5 ngày 1 giờ
Pull request đã merge (30 ngày)
10

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

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 FirebaseExtended/reactfire

Tất cả issue của FirebaseExtended/reactfire

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.