Closed
Description
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
Metadata
Metadata
Assignees
Labels
No labels