Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[firestore]: infinite render

See original GitHub issue

In version 5, there is an infinite rendering of the component, which uses the hooks of this package. In 10 seconds, the hook manages to make ~ 1500 requests to the firestore. To check - I started a clean project, but the problem is still there.


import logo from './logo.svg';
import './App.css';

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, connectFirestoreEmulator } from 'firebase/firestore';
import { useCollection } from 'react-firebase-hooks/firestore';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,

const app = initializeApp(firebaseConfig);
const firestore = getFirestore(app);
connectFirestoreEmulator(firestore, 'localhost', 8080);

function App() {
   const [value, loading, error] = useCollection(
    collection(firestore, 'hooks'),
      snapshotListenOptions: { includeMetadataChanges: true },
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
          Edit <code>src/App.js</code> and save to reload.
          rel="noopener noreferrer"
          Learn React

export default App;


  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "firebase": "^9.6.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-firebase-hooks": "^5.0.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  "eslintConfig": {
    "extends": [
  "browserslist": {
    "production": [
      "not dead",
      "not op_mini all"
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"

image image

Version 4 didn’t have this problem. I noticed this behavior when my project made 89k requests in 15 minutes


At the same time, I did not change anything in the source code, I only updated the “react-firebase-hooks” package. After that I created a clean project for testing, but the problem still remained

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:2
  • Comments:12 (2 by maintainers)

github_iconTop GitHub Comments

SpainTraincommented, Feb 5, 2022

Also, @chrisbianca I love this library. On a previous project (a while back) I had to write a similar internal lib, so I have appreciated the huge amount of time this has saved on my current project 😃

SpainTraincommented, Feb 5, 2022

I also found this to be fixed, thanks again!

Google is usually pretty good about refunding stuff like this if you just ask. I would recommend citing this issue if you do ask.

Great suggestion, I reached out. I’ll be good either way though - I have caused much more expensive bugs in my life 🤣

Read more comments on GitHub >

github_iconTop Results From Across the Web

Firestore - Double render and infinite loop while using useState
And when I assign the data from firestore to the blog variable with useState, the whole function jumps into an infinite loop.
Read more >
Double render and infinite loop while using useState-Reactjs
Coding example for the question Firestore - Double render and infinite loop while using useState-Reactjs.
Read more >
Firestore Infinite Scroll - StackBlitz
Firestore infinite scroll test. ... import 'firebase/firestore'. import React, { Component } from 'react';. import { render } from 'react-dom';.
Read more >
Infinite scroll in Firebase (firestore) and React.js
Why you should use infinite scroll in your App? · How does infinite scroll work in firebase? · Database (firestore) · Folders and...
Read more >
Implementing Infinite Scroll (Lazy Loading) With FlatList Using ...
In our case, we will be using Firebase Cloud Firestore, so infinite scroll will ... All of the data will be rendered in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found