useFirestoreCollection triggers a double render

Offen

#484 erstellt am 29.10.2021 4 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit: 3/5
Geschätzter Aufwand: 1-2 Tage
Anfängerfreundlichkeit: 35/100

Issue-Typ: Bug
Klarheit: Größtenteils klar
Aktivitätsstatus: Veraltet
Tech-Stack: javascript, react
Bereich: database, frontend

Rechercherichtung

Beginne damit, das Verhalten anhand des Testfalls useFirestoreCollection zu reproduzieren, und vergleiche es mit dem ähnlichen Verhalten von useUser. Untersuche die Einstiegspunkte dieser Hooks, um festzustellen, warum das Abrufen mit Suspense dazu führt, dass console.log zweimal ausgeführt wird. Als abgeschlossen gilt die Aufgabe, wenn das Abrufen von Daten einen Render-Vorgang erzeugt, während spätere Render-Vorgänge nur noch auftreten, wenn sich die Collection ändert.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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).

Vorherrschende Sprache: TypeScript
Sterne: 3.6k
Forks: 403
Ø Merge: 5 T. 1 Std.
Gemergte PRs (30 T.): 10

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
Forken Sie das Repository und arbeiten Sie in einem Branch.
Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus FirebaseExtended/reactfire

No bindings for Firebase AI Logic Offen

Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 38/100

FirebaseExtended/reactfire#801 · Erstellt am 25.8.2026
Suspense mode resumes with the previous observable's value on React 19 Offen

v5

Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 48/100

FirebaseExtended/reactfire#793 · Erstellt am 12.8.2026
The observable cache leaks subscriptions and is shared across SSR requests Offen

v5

Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 35/100

FirebaseExtended/reactfire#790 · 2 Kommentare · Erstellt am 11.8.2026
React 19 foundation: run tests against 19, then drop React 16/17 Offen

v5

Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 55/100

FirebaseExtended/reactfire#789 · Erstellt am 11.8.2026
Tests that keep passing when the code they cover is broken Offen

Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 35/100

FirebaseExtended/reactfire#788 · Erstellt am 10.8.2026

Alle Issues in FirebaseExtended/reactfire