Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[firestore]: infinite render #207

Closed
BARTlab opened this issue Feb 3, 2022 · 12 comments
Closed

[firestore]: infinite render #207

BARTlab opened this issue Feb 3, 2022 · 12 comments

Comments

@BARTlab
Copy link

BARTlab commented Feb 3, 2022

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"
    ]
  }
}

image
image

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

image

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
Copy link

SpainTrain commented Feb 4, 2022

I have also experienced this, including the spike in reads due to an open tab.

image
image

I can also confirm that reverting to 4.0.2 fixes this issue.

@SpainTrain
Copy link

I tried to track this down, but couldn't quite figure it out. However, this info from dev tools may hopefully be helpful in tracking down why the hooks are continuously firing.

image
image
image

Note that hook 23 is a callback that uses the collections returned by the other two CollectionData hooks. So that hook call is due to the upstream hook calls.

Also, as OP notes, this was reproducible using the local emulator, so hopefully that is also helpful in tracking down the root cause.

@faz919
Copy link

faz919 commented Feb 4, 2022

Holy hell dude because of this broken package now you have to pay $100...that's so tough 😭😭😭 I had the same issue and then just migrated my project away from r-f-h and switched to the necessary functions in Firebase v9 modular. If anyone's looking, this is a temporary solution until this package is fixed.

@chrisbianca
Copy link
Contributor

@BARTlab @SpainTrain @faz919

I can only apologise that this has happened, in attempting to fix another bug I overlooked the way that useEffect compares entries in the array parameter. I have reverted to the previous behaviour and released version 5.0.2. Could I ask you to give it a try and check that this has now been fixed? I have confirmed locally but would like to be sure.

This behaviour is only happening when the options object is passed into the hook as the hook was seeing a new object reference on each render. The current "fix" removes the options object from being considered as to when to call useEffect, which has the side effect that if a property in the options object changes, then useEffect won't be executed.

@SpainTrain
Copy link

$100 wasn’t too bad overall for this particular project, and I was relieved to find out why it happened!

Thanks for fixing, root cause makes sense, will test it tonight!

@DanielBailey-web
Copy link

DanielBailey-web commented Feb 4, 2022

$100 wasn’t too bad overall for this particular project, and I was relieved to find out why it happened!

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

@BARTlab
Copy link
Author

BARTlab commented Feb 4, 2022

checked version 5.0.2 on my project - I did not find any problems. thanks for the quick fix

@SpainTrain
Copy link

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 🤣

@SpainTrain
Copy link

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

@christiangenco
Copy link

Oof—yup, I was on version 5.0.1 and got a few hundred thousand reads on a project before noticing. yarn add react-firebase-hooks@latest upgraded to 5.0.2 which fixed it.

@chrisbianca thank you for the quick fix and this library!

@chrisbianca
Copy link
Contributor

@SpainTrain @christiangenco you're very welcome, I'm glad its useful and justified the time I've spent on it!

Sorry again for the slip up here!

@NayanPatil1998
Copy link

Thank you for fixing this bug, and thank god I was on free plan so it didnt cost me penny.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants