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

[@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

[@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 🤩

[@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.

[@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! 😃

[@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!

[@birarr]

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

[@KiggunduJude120]

This has literally saved my life

[@iamd.7]

Excellent Playlist. Approved

[@RealSkaarj]

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

[@NetNinja]

Glad I could help!

[@rishadali2866]

Thanks Shaun love your content

[@bgrand-ch]

Thanks for all your amazing explanations 🙌☺️

[@jacob_dmn]

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

[@NetNinja]

Aha, thanks Jacob! :)

[@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 😊

[@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!

[@tech3425]

Great course! Looking forward to more indepth Firebase 9 courses

[@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

[@sinki3322]

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

[@NetNinja]

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

[@jinxin6776]

bro you are the best, i love you

[@programmerrdai]

Great Content Keep up the great work :)

[@tudatostrader]

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

[@slimyelow]

Net Ninja kicka assu!

[@edisonmondal2798]

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

[@wealthiduwe2817]

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

[@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 👌

[@IliyaDamyanov]

Very good video.

[@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.

[@mykoexe4135]

AMAZING CONTENT

[@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

[@generalknowledge6660]

Thanks 🙏

[@nawoditnayan4364]

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

[@thaophung9503]

mine is doing the same

[@joneymiah9014]

will you cover firebase authentication?

[@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.

[@mohamedyoussef8835]

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

[@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 ;)

[@robbyl6863]

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

[@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 🤩

[@yousefbaghlaf6713]

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

[@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 😃

[@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.

[@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

[@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

[@mohammedbadah5537]

Awesome explanation ...

[@xdgogo5231]

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

[@manoj-k]

🔥🔥🔥

[@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]

[@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]);