Infinite Renders on `useCollection`

[erayerdin]

Ref: https://stackoverflow.com/questions/57227400/is-infinite-looping-on-firebase-onsnapshot-function-normal

[erayerdin]

This below seems like it solves the issue, experimenting with it:

const colRef = useMemo(() => collection(firestore, 'signupRequests'), [firestore]);
const colQuery = useMemo(() => query(colRef, limit(25), orderBy('requestDate', 'desc')), [colRef]);
const [snapshot, setSnapshot] = useState<QuerySnapshot<DocumentData, DocumentData> | undefined>();

[erayerdin]

So, wrapping Firestore, CollectionReference and CollectionQuery instances with useMemo gets rid of the rerender.