How to Listen to Real-Time Updates in Firestore

1import { getFirestore, doc, onSnapshot } from 'firebase/firestore'
2
3const db = getFirestore()
4
5const unsubscribe = onSnapshot(
6  doc(db, 'users', 'user-123'),
7  (snapshot) => {
8    if (snapshot.exists()) {
9      const data = snapshot.data()
10      console.log('User data:', data)
11      console.log('Document ID:', snapshot.id)
12    } else {
13      console.log('Document does not exist')
14    }
15  },
16  (error) => {
17    console.error('Listener error:', error.message)
18  }
19)
20
21// Call unsubscribe() when you no longer need updates

1import { collection, query, where, orderBy, limit, onSnapshot } from 'firebase/firestore'
2
3const q = query(
4  collection(db, 'messages'),
5  where('roomId', '==', 'room-abc'),
6  orderBy('createdAt', 'desc'),
7  limit(50)
8)
9
10const unsubscribe = onSnapshot(q, (snapshot) => {
11  // Full list of matching documents
12  const messages = snapshot.docs.map((doc) => ({
13    id: doc.id,
14    ...doc.data(),
15  }))
16
17  // Only the changes since last snapshot
18  snapshot.docChanges().forEach((change) => {
19    if (change.type === 'added') console.log('New:', change.doc.data())
20    if (change.type === 'modified') console.log('Updated:', change.doc.data())
21    if (change.type === 'removed') console.log('Removed:', change.doc.id)
22  })
23})

1const unsubscribe = onSnapshot(
2  doc(db, 'posts', 'post-1'),
3  { includeMetadataChanges: true },
4  (snapshot) => {
5    const source = snapshot.metadata.fromCache ? 'cache' : 'server'
6    const pending = snapshot.metadata.hasPendingWrites
7
8    console.log(`Data from ${source}, pending writes: ${pending}`)
9
10    if (pending) {
11      // Show "Saving..." indicator
12    } else {
13      // Data confirmed by server
14    }
15
16    const data = snapshot.data()
17    console.log(data)
18  }
19)

1import { useState, useEffect } from 'react'
2import { doc, onSnapshot } from 'firebase/firestore'
3
4function UserProfile({ userId }: { userId: string }) {
5  const [profile, setProfile] = useState<any>(null)
6  const [loading, setLoading] = useState(true)
7
8  useEffect(() => {
9    const unsubscribe = onSnapshot(
10      doc(db, 'users', userId),
11      (snapshot) => {
12        setProfile(snapshot.exists() ? { id: snapshot.id, ...snapshot.data() } : null)
13        setLoading(false)
14      },
15      (error) => {
16        console.error('Listener error:', error)
17        setLoading(false)
18      }
19    )
20
21    // Cleanup: unsubscribe when component unmounts or userId changes
22    return () => unsubscribe()
23  }, [userId])
24
25  if (loading) return <div>Loading...</div>
26  if (!profile) return <div>User not found</div>
27  return <div>{profile.displayName}</div>
28}

1import { initializeFirestore, persistentLocalCache, persistentMultipleTabManager } from 'firebase/firestore'
2
3// Enable persistent cache for offline support
4const db = initializeFirestore(app, {
5  localCache: persistentLocalCache({
6    tabManager: persistentMultipleTabManager(),
7  }),
8})
9
10// Listener works offline — fires with cached data
11const unsubscribe = onSnapshot(
12  collection(db, 'tasks'),
13  (snapshot) => {
14    const fromCache = snapshot.metadata.fromCache
15    console.log(fromCache ? 'Offline data' : 'Server data')
16
17    const tasks = snapshot.docs.map((d) => ({ id: d.id, ...d.data() }))
18    console.log(tasks)
19  }
20)