Getting Started with Firebase 9 #6 - Real Time Collection Data

Hey gang, in this firebase 9 tutorial I'll show you how to setup a real-time subscription to a collection get real-time data, using the onSnapshot method.
🐱‍👤 Course files:
github.com/iamshaunjp/Getting...
🐱‍👤 My Premium Udemy courses:
thenetninja.co.uk/udemy/react...
thenetninja.co.uk/udemy/vue-a...
thenetninja.co.uk/udemy/moder...
thenetninja.co.uk/udemy/d3-an...
🐱‍👤 Get access to all other premium courses on Net Ninja Pro:
netninja.dev/
🐱‍💻 My Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

[@IvanJuras]

Your teaching talent is unprecedented. Thank you so much.

[@NetNinja]

Thank you :)

[@ashkanahmadi]

Great job. I have never used Firebase before but your tutorial is definitely helpful. I love the fact that you aren't rushing through everything and taking your time. Thank you

[@andrewclarke6916]

Thanks for making this short course on the new changes to Firebase 9. I've just started working on a new project that utilises Firebase and this collection of videos is so much easier to follow than wading through the online documentation.

[@jakemartin6966]

I NEVER leave comments on YT but this tutorial is seriously awesome! So much better than going through the Firebase documentation.

[@duncanhendry6419]

Thank you very much for releasing this series, it has been a huge help and there doesn't seem to be much info about it at the moment 🙌

[@maskman4821]

Yeah, we can learn the best Firebase courses from Shaun, now the version 9 works much faster than version 8, modular sdk makes bu dle size so small, runs extremely fast, really performance and awesome 🤩

[@birarr]

Great tutorial's playlist! I'm really getting the point. Thanks!

[@bgrand-ch]

Thanks for all your amazing explanations 🙌☺️

[@muhammad_abir]

I can't find enough word to say thank you..... I've watched many tutorials about firebase but really I was not able to understand anything! but now I'm able to make firebase crud by myself also I've learned about webpack...... thanks a lot brother shaun.....

[@NetNinja]

Really glad you like them! 😃

[@rishadali2866]

Thanks Shaun love your content

[@KiggunduJude120]

This has literally saved my life

[@digambernegi2023]

Excellent Playlist. Approved

[@tech3425]

Great course! Looking forward to more indepth Firebase 9 courses

[@nguyenthiphuong1623]

This is the best course to start to learn firebase, I have try a lots series about this but it doesn't clear like your series. Thank you very much.

[@NetNinja]

Glad it was helpful!

[@sinki3322]

You are absolutely amazing. Thank you for helping us !!

[@NetNinja]

Happy to help! :) thanks for such a lovely comment

[@sahidulislamjony5769]

I am enjoying this series

[@tusharutane8031]

Thank you so much I was stuck in my project ☺️ yay I'm so f**** happy

[@NetNinja]

Glad to hear that Tushar 😊

[@programmerrdai]

Great Content Keep up the great work :)

[@RealSkaarj]

Thank you man, that saved me from a lot of frustration with Firebase...

[@NetNinja]

Glad I could help!

[@jacob_dmn]

I'm already celebrating the 1M subs, LOVE U

[@NetNinja]

Aha, thanks Jacob! :)

[@edisonmondal2798]

Sir! You have saved my life ❤❤🔥🔥🖤🖤

[@Forte96]

Hey there, thanks alot for amazing videos first of all! helped me so much so far. I have question about onSnapshot, do you know why my snapshot triggers twice? even I deleted all my code and did exactly how u did in video but it triggers twice(I get 2 console logs). Thanks in advance!

[@IliyaDamyanov]

Very good video.

[@wealthiduwe2817]

Thanks so much for this!!! Pls can you help with a tutorial that shows how subcollections can be used and read using firebase9?

[@cockapockets]

i know its not part of the web stack as such but would it be possible for you to do a series on RUST ? i think your teaching style is great and would love to learn rust from your self as the ones that are out there already are not very good at all. excellent channel hope you reach the 1 million mark

[@slimyelow]

Net Ninja kicka assu!

[@mykoexe4135]

AMAZING CONTENT

[@generalknowledge6660]

Thanks 🙏

[@tudatostrader]

Can this be done on Realtime Database as well as Firestore? Thanks Shawn!

[@muhammadarsallanshahab6760]

In react app where should we put our initializeapp function? Is that should in every page where we need to use firebase or just util file

[@Omerko]

I thought that you would change DB from Firestore to Real-Time, but using a snapshot is really handy for this.. Nice video.. :D

[@maskman4821]

Socketio is cool too 😎

[@tariqsyed6011]

Is it free in Firebase to get real time data

[@anonymouspersonal9136]

I'm using react for this tutorial. First I created a new react app then I removed the things which is not necessary. Created all things like you did. The react way. UI is fine. Reset is fine. However when I go to inspect and check the console. It doesn't show me anything. Like the Array it is showing you.

[@yousefbaghlaf6713]

Isnt it more expensive to attach a listener than a normal get call?

[@mohammedbadah5537]

Awesome explanation ...

[@joneymiah9014]

will you cover firebase authentication?

[@mohamedyoussef8835]

Awesome Tutorial ++++++++++++++++++++ Thank You

[@robbyl6863]

In React Native / expo. When I set up onSnapshot it just keeps firing over and over, even when nothing is changing. Any ideas?

[@amaechinaikechukwu8266]

In my project,when data is added and onSnapshot is called, the whole existing data is added to the new data, causing duplicates. Hopefully,you've helped me.

[@leonvanrijswijk8409]

Thanks. Does this 'auto-fetch' also happen if someone on another computer changes the collection?

[@NetNinja]

Yeah, it doesn’t matter who makes the change.

[@sagshah10]

Just wondering, if you had a large collection of data, maybe millions of records, can you control how much of the snapshot you receive? Or would it return the whole collection always. How would you optimize for those scenarios?

[@jackknott1993]

You can pass through a query instead of a collection ref (built using the collection ref and where/orderBy clauses etc) and I'm guessing it only triggers when something is updated that matches the query

[@maskman4821]

@@jackknott1993 smart move 👌

[@xdgogo5231]

I did exactly the same thing as in the video and mine is not working. Could you try and help me?

[@manoj-k]

🔥🔥🔥

[@Shubham_Patil__]

Can I use this to render my data in real time? Like if I add or delete something then will it reflect on my page without reloading the page??

[@jsricochet]

Yes you can :) Following this great tuto, I've done it with React like so: const [technos, setTechnos] = useState([]); const firestore = getFirestore(); const colRef = collection(firestore, 'technos'); useEffect(() => { onSnapshot(colRef, (snapshot) => { console.log('snapshot', snapshot); getTechnos(snapshot); }); }, []); function getTechnos(snapshot) { let result = []; snapshot.docs.forEach((doc) => { result = [...result, { ...doc.data(), id: doc.id }]; }); setTechnos(result); } Then you just have to iterate over the technos array on the view ;)

[@nawoditnayan4364]

my console page is not updating every time i have refresh the page to see new data

[@thaophung9503]

mine is doing the same

[@Ebuilt]

Hi, I have followed your tutorial & I am getting data in my window sucessfully. But I am unable to pass this data to other file. When I use hook I got Error. Can you please Let me know the issue

[@Ebuilt]

import firestore from '@react-native-firebase/firestore'; import React, { useEffect, useState } from 'react'; export const UseFetchUserData = () => { const [userData, setUserData] = useState([]); console.log('fire store entry') useEffect(() => { const unsubscribe = firestore() .collection('Users') .onSnapshot(snapshot => { const changes = snapshot.docChanges(); const updatedData = changes.map(change => change.doc.data()); setUserData(updatedData); console.log('Dynamic',updatedData) }, error => { console.log('Error fetching data:', error); }); return () => { // Clean up the subscription when the component unmounts //unsubscribe(); }; }, []); return null; }; This is the file which request data

[@heyIappreciateit]

When is the firebase admin sdk?

[@maskman4821]

Yeah, that is one of my question, nodejs+express/fastify+firebase admin, we have a lot of opportunities to work with firebase in our own backend, you know 😃

[@maskman4821]

Hello, Shaun, is it possible for you to create a series of supabase tutorials? a lot of corps, projects have shifted to supabase and we really need a good tutorial on this cool serverless, I know you are a big fan of firebase, but we have to move on, embracing new technology, anyhow thank you in advance 🙏🙏🙏

[@NetNinja]

I will also be doing a supabase tutorial in the future :)

[@maskman4821]

@@NetNinja that would be awesome 🤩

[@danielwatson6529]

I always say "Alright Then Gang" when you do at the start of each vid, I know the starts all off by heart now 😅

[@ChandanKumar-of1je]

[@udaykiran4912]

onSnapshot is not working when i add data, changes are not reflected on console

[@krzysztofchylinski6252]

same issue, seen others having same on stack overflow, unfortunately i can't find an aswer

[@covaciuandrei]

@@krzysztofchylinski6252 It seems that you need to run the npm run build before because you need to have the watcher on for the changes

[@ginichimarugraal8282]

@@covaciuandrei thanks buddy u saved me

[@covaciuandrei]

@@ginichimarugraal8282 i never leave comments, but i think i was searching for a solution for half an hour😂😂 You’re welcome bro

[@xdgogo5231]

@@covaciuandreithank you soo much, I really tought I was missing something, I can't thank you enough

[@vhack__4126]

Bro the same code is not working for me. Its giving this error Expected type 'Query', but it was: a custom CollectionReference object FirebaseError: Expected type 'Query', but it was: a custom CollectionReference object Code: useEffect(() => { const getChats = () => { const unsub = onSnapshot(collection(db, "user"), (snapshot) => { snapshot.docs.forEach((doc) => { console.log("snapshot: ", doc.data()); }); }); }; userState.user.uid && getChats(); }, [userState.user.uid]);