Realtime Listener

المستمع الفوري

GLS-000096

Intermediatedatabase1 min read
onSnapshotrealtime updateslive datafirestore listenersubscribe

Definition

A Firestore feature that pushes live data updates to your app whenever the database changes.

ميزة Firestore تدفع تحديثات البيانات المباشرة إلى تطبيقك كلما تغيّرت قاعدة البيانات.

Why It Matters

Realtime listeners power live features. If 404Fault adds live notifications or a feed, realtime listeners would be the mechanism.

المستمعون الفوريون يُشغِّلون الميزات المباشرة. إذا أضاف 404Fault إشعارات مباشرة أو تغذية، سيكون المستمعون الفوريون هم الآلية.

Full Definition

Instead of fetching data once, a realtime listener subscribes to a Firestore document or collection and receives instant updates whenever data changes. Use onSnapshot() to set up a listener. Always unsubscribe when the component unmounts to prevent memory leaks. Useful for chat, notifications, or live status updates.
بدلًا من جلب البيانات مرةً واحدة، يشترك المستمع الفوري في مستند أو مجموعة Firestore ويتلقى تحديثات فورية كلما تغيّرت البيانات. استخدم onSnapshot() لإعداد مستمع. قم دائمًا بإلغاء الاشتراك عند تفكيك المكوّن لمنع تسرب الذاكرة. مفيد للدردشة والإشعارات أو تحديثات الحالة المباشرة.

Example Usage

const unsub = db.collection('notifications').where('userId','==',uid).onSnapshot(snap => setNotifications(snap.docs.map(d => d.data())))

const unsub = db.collection('notifications').where('userId','==',uid).onSnapshot(snap => setNotifications(snap.docs.map(d => d.data())))

Knowledge Graph

Avoid these mistakes when using Realtime Listener:

1

Forgetting to call unsubscribe() in useEffect cleanup — causes expensive open connections

2

Using realtime listeners for data that rarely changes (use get() instead)

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using Realtime Listener.

Explain:
1. What is Realtime Listener and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Forgetting to call unsubscribe() in useEffect cleanup — causes expensive open connections, Using realtime listeners for data that rarely changes (use get() instead)
5. Best practices and production tips

Official Resources