Differences between useEffect() and useSWRSubscription()

73 Views Asked by At

I am reading some data real-time from Firebase's Cloud Firestore using a query and useEffect:

import { useEffect } from 'react'

useEffect(() => {
    const q = query(
        collection('some collection'),
        where('some condition')
    )

    const unsubscribe = onSnapshot(q, qs => {
        const datas = [];
        qs.forEach((doc) => {
            datas.push(doc.data());
        });
        console.log(datas);
    })
    return () => unsubscribe && unsubscribe()
})

I have recently found out this SWR, described as a React Hook for Data Fetching.

In their documentation, they show this example where they are using useSWRSubscription to subscribe to a Firestore data source. So I can recreate the previous code block like this:

import useSWRSubscription from 'swr/subscription'
 
const { datas } = useSWRSubscription(queryParams ? queryParams : null, (_, { next }) => {
    const q = query(
        collection('some collection'),
        where('some condition')
    )

    const unsubscribe = onSnapshot(q,
        qs => {
            next(
                null,
                qs.docs.map(doc => doc.data())
            )
        },
        err => {
            return next(err)
        }
    )
    return () => unsubscribe && unsubscribe()
}

console.log(datas)

Is there any difference between these two code blocks?

0

There are 0 best solutions below