Infinite loop inside useEffect while trying to use Firebase

Question

I'm building an app to write down values for electrical and gas meter : https://n3g.gitlab.io/react-conso-energie/

If you check the console, you'll see an infinite print of a console.log.

Here's the file where this magic happen : https://gitlab.com/n3g/react-conso-energie/-/blob/br/V2/src/ListingExpansionPanels.js

I don't understand why my useEffet (line 19) is fired infinitely although I've add [dbRef] check at line 36..

In my imagination, it would be fired only if I add or remove things in my database ?

Thanks you if someone can take a look because I'm struggeling with this since few weeks. I do believe I'm over complicate things when I try to fecth data from my database..

Aleksandre Javakhishvili · Accepted Answer · 2020-03-19 22:32:58Z

1

Try wrapping firebase.database().ref('2020') with useRef hook like this:

const dbRef = useRef(firebase.database().ref('2020'));

And remove dbRef from useEffect deps array, change usage from dbRef to dbRef.current

answered Mar 19, 2020 at 22:32

Aleksandre Javakhishvili

4363 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Touk Over a year ago

Thanks, yes it works, but when I add or remove items, the display doesn't refresh now.

Aleksandre Javakhishvili Over a year ago

Your data comes from the firebase database, you pass the callback function to this methoddbRef.orderByChild('trueDate').once where you set the state, but it is called once in useEffect, on the first component render, so for example when you call the handleDelete method you just update the data in database, in order to see the changes you have to call this function dbRef.orderByChild('trueDate').once again and update the state in its callback function.

Touk Over a year ago

Thanks, I understand. In fact it was my fault for the last part, I was retrieving data with .once instead of .on - Now I don't even have to re-execute something in order to get the data after delete or add items.

Collectives™ on Stack Overflow

Infinite loop inside useEffect while trying to use Firebase

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related