How to set up React with Firebase/Firestore v9 (Part 1 | onSnapshot)

Performing queries in Firestore and deleting documents
Learn how to set up Firestore with React in a CRUD application (Web version 9 - Modular Syntax)
We'll be making a simple full-stack color palette app for this demonstration.
React Firestore v9 Playlist:
• How to set up React wi...
Part 1: Read realtime data with onSnapshot
• How to set up React wi...
Part 2: Create new documents with addDoc/setDoc
• How to set up React wi...
Part 3: Update existing documents with setDoc
• How to set up React wi...
Part 4: Performing queries and deleting documents
• How to set up React wi...
Part 5: Order document query by date created/modified timestamp
• How to set up React wi...
The code used in this video:
github.com/Log...
Firestore Quickstart Documentation:
firebase.googl...

[@sinki3322]

I don't even know where to start to thank you. You have just unstuck me from the problem I was trying to fix for the past weeks without receiving any help. You have just allowed me to pass my final exam I've been struggling on so much, and finish my studies. You have just allowed me to get my diploma and start looking for a job. I will never be able to thank you enough. Crazy how people accross the world can literally change your life. Thank you for explaning so well, taking the time and walking us through this. Thank you!

[@user-pe8wq3xf1l]

Thanks for the guide! The documentation is less clear. Very helpful, keep up the good work!

[@colindaniels1866]

holy shit i finally found the blessed video with the info that actually works

[@BillyLegumbres]

dude, I can't thank you enough for the clear, concise and helpful tips you gave us to tackle this task you're my hero for reels

[@henrydj3220]

finally THE SOLUTION. the switch to v9 modular is horrible if you're a beginner coder, this video finally helped me where dozens of stack overflow questions couldn't! thank you!!!!!

[@ravenjs]

exactly @Henry there arent a lot of resources out there for the updated web v9 (modular) right?? hahaa :))

[@nomanraihan6035]

I am not going to forget you in my entire life. If any of your tutorial is not related still I shall watch for the sake of your benefit. I am struggling for many months to understand firebase. Finally I have ended my search. Please make more videos on firebase and react (Project based). Thanks a lot from the bottom of my heart dear brother.

[@ravenjs]

hi Norman, thank you so much for this message. this is exactly the reason that keeps me going! i'm glad that you found this video helpful and than you once again for this amazing comment.

[@MrDuff158]

Been stuck following different tutorials trying to find a way to render the data on screen. Been going around in circles trying to save the data into a variable without using useEffect or useState. You pulled me out of a deep dark hole. Thanks for the excellent tutorial!

[@michaelapowers3875]

Okay, I kid you not, I have been trying to understand how to use Firebase with React-Redux for over two weeks now, and this is the only tutorial that has made enough sense for me to be able to get it to work. Bless you!!!

[@ravenjs]

thank you so much :))

[@lrajoo11]

This is amazing, and it's the only up to date firebase tutorial I've seen. Subscribed!

[@ravenjs]

thanks Lloyd you're amazing too xD

[@te_comp_a_61rahul_pal70]

I agree.. I wish his videos come up first because I was struggling with some errors as I was following a 2020 tutorial.. this updated video is really helpful!!

[@ravenjs]

@@te_comp_a_61rahul_pal70 thank you so much HAha i appreciate it!

[@ajayraho]

Totally agreed! And subscribed !

[@ravenjs]

@@ajayraho :)) thanks a million

[@oluwaseunrobert7066]

I love you brother, you just helped me solve my bug, my posts are loading into the document without me reloading, thanks a lot

[@abelkibebe577]

Finally, dude u have no idea how much i suffered looking for the firebase video that would work,,, thanks u saved me a lot of time.. keep going We Love U :)

[@muhammademirsyah8037]

really help me, been struggling like 5+ hours. found this really help me to solved my problem

[@ravenjs]

this is amazing haha :))

[@BrianJackson-zw7jx]

Excellent video talking about snapshots in firebase v9. This is the only video and material that I found that shows how to cleanly unsubscribe on component dismount. Well done and thank you.

[@hexd7439]

That's awesome. Thank you very much. I had been fixing this problem for about an hour then your video saved me. I really appreciate your help.

[@KarakiriCAE]

what a legendary video. all the other videos are outdated or out of scope. you did it man!!!!

[@unknownguy2905]

Finally a nice firebase video for newbies

[@hamednajand4380]

Simple. efficient and complete tiny course about firebase!

[@learnwithjoe8117]

Congratulations on such an awesome, helpful and clear tutorial! I was just about to give up trying to search for a proper firebase firestore v9 tutorial after watching an iMessage clone video which was created using v8 and it no longer works after the update. What I love about your video is you explain details about firestore in plain and simple language which is easily overlooked at by other video tutorials. Now I understand the reason behind the syntax used! I got excited again about learning how to use firestore!!! It seems you have a lot of knowledge about the other uses of firebase so I think it would be amazing if you can give a walk through and also use cases of how to use them. More power and all the best for your channel. P.S. looking forward to your next upload!

[@ravenjs]

Hey @Learn with Joe, thank you so much for this message!! It's always so motivational to read comments like these. also I'm glad that you found this helpful, I wasn't really sure how helpful this was gonna be xD About the other firebase services, I'm in the process of making a video/series about Firebase Authentication, I've been quite busy lately so hopefully I can get it done by this week.. thanks for your support once again :)

[@Hiatuz4]

You.... I love you.. you explained everything. Makes so much sense. God blessed you.

[@ravenjs]

thank you haha

[@TrixyJ]

This is very useful, I wanted to build a note app with firebase and I didn't know how to connect it. It's a great way to learn firebase through this video.

[@ravenjs]

Thanks Jane :))

[@tseveendorjganbaatar8958]

This is exactly what I just need so far. thank you

[@tomasgilamoedo8301]

Clearly the best firebase &React tutorial on KZbin! congratz bro & its really appreciated

[@ravenjs]

Haha thanks bro tqsm :))

[@theonewhowill4903]

Thank you so much, the official documentation wasn't much help. I'm glad I found this.

[@gregzc9395]

Great videos really helpful I'm just finished a programming course and I'm trying to learn firebase right now and these videos are really helpful!

[@hojinharry6270]

You are a lifesavor. thank you for your videos. keep it up.

[@delta.v9912]

Thank you for the video! I am so happy I found this, you explain everything very well, in the end it just feels so simple, can't wait to watch the next episodes. :)

[@ravenjs]

thanks @Tomasz :))

[@vegardlokreim5549]

first comment on youtube ( in like 5 years) Great work! Thanks a lot! You deserve more subscribers! Also...Your way of describing/explaining is well structured (imo)! keep up the good work!

[@bolajioyewo1515]

Wow, You just made my day with this video. Thanks man

[@ravenjs]

and you just made my day with this comment. Thank you :)

[@VIETNGUYEN-gb7gn]

thanks for your guide, i have looked up this for a time

[@DonDaMoniker]

Succinct and easily transferable to other uses. Thank you.

[@ollyoctavian]

Really nice videos! Keep up the good work and you will go far.

[@arkindustries7347]

Thanks dude, It help a lot learning new firebase sdk. Excited to part 2!

[@ravenjs]

Haha I'm excited for part 2 too!

[@amrmahmoud3082]

Thanks Thanks i have been struggle from this and you made it so simple thank you very much ❤❤❤❤❤❤

[@ravenjs]

@AmrMahmoud thank you :)))

Hi, thanks for the video. You helped me to figure out the combination useEffect and Snapshot.👏 The Firebase docs are kind of clumky. So I also want to share knowledge with you. Inside of the useEffect you were doing something like "return unsub". The correct way is: "return ( ) => unsub( )" In short it needs to return a function which calls back (pun intended) unsub. 😊

[@mamunmahmood8070]

Thanks, man I was stuck with this modular version.

[@64revolt]

To make the consol logs bigger (on brave at the least), open the dev-tools and then zoom using ctrl+ :) Also, awesome tutorial :D

[@riyabhandari2795]

Wow , what a perfect explanation, totally NOTEWORTHY Video for firestore no doubt 😄💯💯🙌🏻

[@ravenjs]

Haha thank you so much @Riya

[@priyankaroberts1093]

Hey Riya ! Have you built any projects in React? Are you looking out for any job opportunities in React or other JS frameworks currently?

[@riyabhandari2795]

@@priyankaroberts1093 yes I'm open for job opportunities

[@priyankaroberts1093]

@@riyabhandari2795 awesome. Connect with me using my profile link given on my channel so that we can continue this conversation there?

[@riyabhandari2795]

@@priyankaroberts1093 okay 👍

[@Enigmata23]

Thank you for this. Subscribed.

[@ritualj0int]

Proper job mate, was really helpful for me!

[@sebastiangarzonarias9193]

Thank you, you helped me with the video to finally solve a problem I had with a project of mine.

[@ravenjs]

awesome :)))

[@ahmedhossam475]

Man thanks for this video! I didn't understand how it works from the official documentation.

[@ravenjs]

you're most welcome! glad i could help

[@heyiamigor]

Amazing work. Keep it up!

[@ravenjs]

thank you so much Igor

[@Son-vy5rl]

This was great, I really needed to know how to add the id into the doc.data() object. Thank you!

[@KodyWright-od2tb]

You are a game changer!

[@jain78343]

very very very Useful!!!!!! Thank you so much

[@chrisnotthere]

You have a great way of explaining why and what you are doing. Thank you for this great content! Subscribed!

[@ravenjs]

Awesome, thank you! @Chris I appreciate it :))

[@Rolfikv]

Dude... Thanks! amazing tutorial.

[@ravenjs]

thank you :))

[@uwagideon2723]

bro you're the best

[@shivangkhandelwal334]

Thank you thank you thank you, all my problem is solved in 15 minutes 🤩🤩🤩

[@priyankaroberts1093]

Hey Shivang Have you worked with react lately ? Would you be interested in exploring internship/job opportunities in web development ?

[@user-ib7ux3js1n]

Amazing video, thanks!

[@OtisDeLarge]

Btw you can make the dev tools larger by pressing CTRL and "+" while it's in focus. Thanks for the tutorial.

[@ravenjs]

thanks for the tip Jim!! Idk why I couldn't figure it out earlier heh

[@oguzhanseker6806]

Keep up the work brother. Appreciated. :)

[@ravenjs]

Thank you :))))

[@te_comp_a_61rahul_pal70]

You are amazing!! Keep up the good work!!❤️❤️

[@ravenjs]

You're amazing too! :))

[@mubashirwaheed474]

Thank you so much for this video

[@ravenjs]

Most welcome 😊

[@discontinuity]

So helpful thanks

[@JaydenLOL]

So underrated! Do more tutorials!

[@ravenjs]

I will @Jayden!!! Thank you so much

[@dalandanemaas3241]

This is helpfull. thanks!

[@TheYoterompo]

Thanks dude, you actually help me a lot!!!

[@codeyourdreams5894]

nice

[@ravenjs]

Thanks bro 😌

[@MAXBOU0215]

You saved my life

[@javierperez_com]

Really good tutorial. Thank you so much.

[@ravenjs]

Thanks Javier !!😙

[@barsarbro4610]

Press control and + button for increase size of console window

[@ravenjs]

@parag barsar thank you so much ! ha i tried it and it works!!! how did i not know of this sooner...

[@axelpo9390]

very thanks !!!!

[@ravenjs]

awesome :))

[@JavierSosa]

Thank you so much dude! Greate work!

[@ravenjs]

thx for the encouragement Javier :))

[@mcdaddy1334]

VERY NICE!

[@ravenjs]

THANK YOU :)

[@conorkelly6391]

Brilliant first video. I have what I expected with a js component. Only tried that as my typescript component wasn't working. property name is missing in type {'id: string'} . Any ideas?

[@pawntozy]

I almost cried when this worked for me

[@ravenjs]

i know that feeling :))

[@reactteamwdp7648]

thank you so much sir

[@ene_andre]

Thank you so much

[@nejan_s]

thanks a lot :)

[@ravenjs]

you're most welcome 😁

[@chotaHatti]

Thank you so much.

[@priyankaroberts1093]

Hey Pranav Have you worked on any react projects recently ? Are you open to any opportunities in software development ?

[@iankitverma]

Awesome. Can you please make a video on how to authenticate user with phone number and store the details of user on firestore, it be great ! Thanks.

[@ravenjs]

thanks @Ankit! this is an amazing suggestion. I'll definitely be looking to add this to the Firebase Auth playlist

[@priyankaroberts1093]

Hey Ankit Are you working on react projects presently? Are you interested in exploring opportunities in web development ?

[@azizanbouri4101]

god bless you brother

[@arslanahmed1311]

Thanks

[@dr.lunyak2386]

парень, ты очень крутой! спасибо!

[@IvanClayMoura]

Thank you for this video tutorial. Can you make a video about social login with version 9 of firebase?

[@ravenjs]

Yes @Ivan I'll be doing a new series for Firebase Auth :)) thx for the suggestion too

[@rroossyyiidd]

Thanks a lot :)

[@ravenjs]

thank you :))

[@m__link6499]

Nice video...I think the function is called getDocs and not getData (12:47)....

[@ravenjs]

yes, i think you're right :)) thx for the correction

[@WillSmith-qt7me]

More React and Firebase 9 tutorials, Tailwind. Thanks.

[@ravenjs]

Ah Tailwind CSS. yes yes Will thanks for the suggestion!

[@MadaraUchiha_404]

thanks a lot

[@olivergjesing1721]

My man

[@rafaelsoteldosilva]

Hi!. Thank you for these great lessons. They have been really useful. I have a question; Could you explain to me why the use of onSnapshot in useEffect like 'useEffect(() => onSnapshot...' assures that the listener will be terminated whenever the user is done. I was researching the internet and they use unsub but the app stops showing the data, under your approach it shows the data. I'm concerned about having it developed in React Native to have the users have the app, but it could deplete the battery if it's not properly done. Thanks in advance for your answer

[@ravenjs]

In ES6 syntax, when you make an arrow function like this: () => someFunction() the return value of when someFunction is executed will be automatically returned to the parent arrow function. React's useEffect hook is designed to automatically execute any function handles that are returned to it. In this case, we are returning the return value of onSnapshot (which is the unsub function) to useEffect.

[@mohammadpiramun5913]

thanks for this video and i hoop that you make more of that video in the future with some real react app thank bro.....

[@ravenjs]

thank u too mohammad :)))

[@aramabdulrahman2087]

please depending on cost which one better realtime db or cloud firestore db for datatable with more search request per month thanks....

[@ravenjs]

realtime db's costing depends on the storage size of your data, whereas cloud firestore's costing depends on the number of operations that you perform. In cloud firestore, the size of your data doesn't really matter because it's the number of operations that costs you money :)

[@joaopaulo-ff3vb]

thanks bro

[@thaibinh6585]

hi I am using react native by expo and when try to const db = getFirestore() or console.log(getFireStore()) its said "undefined is not an object (evaluating '_ref23.options')". Do you know how to solve this problem? I've tried to search for it but cannot find the answer

[@ravenjs]

hmm did you check if your API key is correct? if it is and it still doesn't work, you could try using the v8 (namespaced) syntax and see if that gives you the same error too?

[@thaibinh6585]

@@ravenjs I researched more and find out that firebase v9 is not compatible with expo so I return to v8 and it works fine

[@ravenjs]

@@thaibinh6585 ahh so the issue is indeed because of v9.. I was just taking a wild guess because I’ve never tried Firebase with expo too 🙃 Thanks for letting me know @Thai Binh I’ll be looking out for similar errors in the future :))

[@thaibinh6585]

@@ravenjs man its took me 2-3 days trying over and over until I frustrated and happens to find the answer, feel bad man

[@jessepinkman5649]

Thank you sir

[@ravenjs]

awesome @Jesse :))

[@137dylan]

Hi..before I watch, can you please tell me: 1. Is this using the latest version of Firebase 2. Do you include usage of the firebase hooks package 3. How many parts will there be to the series and when will they all be out Thanks!

[@ravenjs]

1. Yes I used the latest version of Firebase with the latest syntax (modular ES6) 2. No, I'm not using the 'react-firebase-hooks' package if that's what you're asking, but a video on how to create our own custom Firestore hooks is coming up! 3. There are only 2 parts to the series at the moment, coming out within the week. If more ideas come, I might add additional videos to the series but all of the basics would already be contained in the first two parts.

[@IanMont]

Please please could you make a tutorial on Firebase Auth with login with profile picture and using the latest version of firebase(v9 modular) PLEASE BROO

[@ravenjs]

Hahaah @Ian Mont good suggestion, I'll get to it ASAP

[@IanMont]

@@ravenjs Yeaaahh

[@wiazowski1]

The problem with most tutorials is that people explain what they are doing with the objects and functions, but they dont explain what exactly the functions or objects are doing, neither the origen of thoses and why we need them.

[@richardbee_r]

Bro Thank you so much With this video, I was finally able to unsubscribe my listeners Thank you

[@TheNamesJT]

So, in my collection i have a map defined on the cloud firestore. However, it won't display the values. which is weird. Because the collection is the collection used in useEffect so it should not be undefined because it has a value. I'm getting this error TypeError: can't convert undefined to object. On firebase docs it says "Map: By keys, then by value -Represents an object embedded within a document. When indexed, you can query on subfields. If you exclude this value from indexing, then all subfields are also excluded from indexing." {Object.entries(users.identity).map((key, value) => ( {value.firstName} {value.lastName} ))}

[@ravenjs]

Is your source code huge? Could you upload your file to pastebin (excluding sensitive information/API Keys) and post the link here? And could you also paste the link to the Firebase docs that you referenced? Thx @TheNamesJT :))

[@TheNamesJT]

@@ravenjs Thanks but decided not to use firebase just wasn't working moved onto mongodb and going to deploy to heroku once i'm done with creating the database using that. Firebase is blah...

[@ravenjs]

@@TheNamesJT Haha yes sometimes MongoDB is just better suited than Firebase :)))

[@puneetdhiman5194]

The component is re rendering continuously.

[@ravenjs]

Did you add the empty array as the second argument for useEffect?

[@puneetdhiman5194]

@@ravenjs yes

[@ravenjs]

@@puneetdhiman5194 you could put your code on pastebin if you want me to check it out :))

[@priyankaroberts1093]

Hey Puneet Good to know that you like learning from these tutorials. Are you a fresher and open to exploring opportunities in web development currently?

[@puneetdhiman5194]

@@priyankaroberts1093 yes

[@100028237]

can we put another snapshot in the root snapshot with async/await?

[@ravenjs]

what do you mean?

[@100028237]

@@ravenjs for outer snap , i want to get the list of documents . For inner snap , i want to get doc by id from the list of ducments.

[@kushalshukla444]

thanks dude , btw what i was doing is like importing firebase from "firebase" but it showing error , `firebase is not imported like that` :(

[@ravenjs]

did you manage to fix the error @kushal?

[@kushalshukla444]

@@ravenjs yep

[@ravenjs]

@@kushalshukla444 could you paste the full error here if you want me to take a look it it ? :))

[@kushalshukla444]

@@ravenjs console.log("first") useEffect(() => onSnapshot(collection(db,"message"),(snap)=>{ SetMessages(snap.docs.map(doc=>doc.data())) }, [])); here what is happening is that when this code run, it keep on printing "first" , SetMessages is a function of usestate array.

[@ravenjs]

@@kushalshukla444 it seems like your React App is perpetually re-rendering for some reason. Could it be because of some code snippet that you wrote outside of useEffect()? another possible reason is because you forgot to put in the empty array as the 2nd argument in useEffect, but I think you already have it in the snippet that you pasted here useEffect( () => {}, [] )

[@Atlantis281]

Hi. This vid helped me out greatly in my current project! Question: How would I go about limiting the onSnapshot to only bring over 2 docs? I see on Firebase I need to use limit(2) but I cant see where I need to put that in this code. Any help would be awesome!

[@ravenjs]

Hello. First, you'd wanna do the imports: import { query, collection, limit, onSnapshot } from "firebase/firestore"; Then, use limit(2) like so: const collectionRef = collection(db, 'collectionName'); // Get the collection's reference const q = query(collectionRef, limit(3)); // Store the query in variable 'q' Then, replace the first argument of onSnapshot with the query variable 'q': const unsub = onSnapshot(q, (doc) => { // ... }); Let me know if this works! I have yet to try this myself too.

[@Atlantis281]

@@ravenjs Worked with some modifications. const [blogs, setBlogs] = useState([]); const collectionRef = collection(db, "blogs"); const q = query(collectionRef, limit(2)); useEffect( () => onSnapshot(q,(snapshot) => setBlogs(snapshot.docs.map((doc) => ({...doc.data(), id: doc.id}))) ), [q] );

[@ravenjs]

@@Atlantis281 Awesome amazing! :))

[@rubenverster250]

JUST GO RTFM! ༼ つ ◕_◕ ༽つ

[@ravenjs]

hahaah :))

[@Better_Dev]

How do I push data to FireStore with a unique id?

[@ravenjs]

Hey! What you wanted to do is gonna be in Part 2, but since you're here early I'll just show u how to do it now :)))) So this is what you'd do in an async function: const docRef = await addDoc(collection(db, "colors"), { name: "White", value: "#fff" }); console.log("Document written with ID: ", docRef.id); If you prefer promises: addDoc(collection(db, "colors"), { name: "White", value: "#fff" }).then(docRef => console.log("Document written with ID: ", docRef.id)); You don't have to specific an ID if you want Firestore to automatically generate one for you. Also, don't forget the imports: import { collection, addDoc } from "firebase/firestore";

[@Better_Dev]

@@ravenjs I'm using a promise, changed my setDoc to add Doc. const sendPost = e => { addDoc(doc(db, 'posts'),{ name: "Connor", description: "Developer", message: input, }).then(DocumentReference => console.log("Document written with ID: ", **What goes here)); I'm getting an error saying my document ref must have an even number or segments, but posts has 1. Appreciate the help!

[@ravenjs]

@@Better_Dev nice. Did it work?

[@Better_Dev]

@@ravenjs No im getting an error saying my "document ref must have an even number of segments, but posts has 1" Struggling here

[@ravenjs]

@@Better_Dev ​ First, "**What goes here" should be DocumentReference.id in your case, but this console.log is totally optional. Next, the reason why you're getting the document ref error is because you are using doc(db, 'posts') as the first argument in addDoc(). doc() targets a specific document, whereas collection() targets an entire collection. In your case, you probably should target a collection because you are adding a document to a collection. So, simply changing doc(db, 'posts') to collection(db, 'posts') would work.

[@abdelhalim731]

gj

[@ravenjs]

thanks :)

[@fouziarief]

hi its great firebase tutorial am trying to work on am getting this error can please help on this "errors.ts:94 Uncaught FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore"

[@ravenjs]

you might have to check the path of your document/collection reference