[firestore]: infinite render

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.

App.jsx

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 },
    }
  );
   
   console.log('app');
    
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

package.json

{
  "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": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

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

[SpainTrain]

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 😃

[SpainTrain]

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 🤣