0

It seems like onSnapshot is triggered again whenever I print something related to the data that I retrieved, without changing the data. Here is an example of code that works correctly for me, it prints the length of the collection once:

const [games, setGames] = useState([]);
useEffect(() => {
    onSnapshot(collection(db, "games"), { includeMetadataChanges: false }, (snapshot) => {
        setGames(
            snapshot.docs.map((doc) => ({
                id: doc.id,
                item: doc.data(),
            }))
        );
        console.log(games.length);
    });
});

However, if I want to print the data I retrieved with

<div>
    {games.map((game) => {
        console.log(game.item);
        return <>{game.id}</>;
    })}
</div>

for example, it will infinitely repeatedly print the length of the collection then the data in the collection. Another example that breaks it is adding another print statement in the beginning of the onSnapshot handler:

snapshot.docChanges().forEach((change) => {
    console.log(change.type);
});

this will repeatedly print "added" and then the length of the collection, even though nothing is being added to the collection. Does anyone know why this occurs?

Dharmaraj
  • 47,845
  • 8
  • 52
  • 84
Jeffmagma
  • 452
  • 2
  • 8
  • 20
  • Try adding a dependency array like `useEffect(() => {...}, [])` ? – Dharmaraj Nov 08 '22 at 06:46
  • That seems to work, but I don't think that I understand why. If I have an empty dependency array or just setGames in the dependency array, it seems to fix it. But If I have both games and setGames in the dependency array, it goes back to looping. Why does this happen? – Jeffmagma Nov 08 '22 at 06:50
  • Does [this](https://stackoverflow.com/questions/58579426/in-useeffect-whats-the-difference-between-providing-no-dependency-array-and-an) help? – Dharmaraj Nov 08 '22 at 06:52
  • Ah, that makes a lot of sense! I guess I just wasn't able to link the program output to the actual issue that was occuring – Jeffmagma Nov 08 '22 at 06:54

0 Answers0