Firebase Tutorial With React Hooks

[@leebuckle8288]

If anybody is having the 'React Hook "useEffect" is called in function...' issue, try capitalizing the 'useTimes' function so it's 'UseTimes', this will cause it to be read as a component instead of a function and should solve the issue. Other than that (which is probably version related), amazing tutorial!

[@BaylorBreaksItDown]

This is absolutely correct. Thanks for sharing.

[@leebuckle8288]

@@BaylorBreaksItDown Thank you for the concise tutorial! Repeat rendering had me stumped for hours before this!

[@hessaa1712]

right .. this was the issue thank you for pointing it :3

[@leebuckle8288]

@@hessaa1712 Gladly :) I was stuck for hours before figuring this out

[@mudyeet_]

I applied for an internship and I was desperately looking to learn how to integrate firebase with React because, well, that's what who's hiring me needs me to know. Now, I can't say I just became a master of firebase after watching this video, but I can say that it did give me a lot of tips that I can use in the task given to me. Thank you!

[@BaylorBreaksItDown]

That is awesome! Thank you!!

[@gwapster13]

This is great, thank you! One suggestion: maybe increase font size on the editor, for people watching this on smaller screens.

[@ginocode]

Love a tutor who can be professional yet not afraid to have fun and brag about their lockpicking skills. Awesome vid!

[@benabernethy1405]

Thank you so much. One of the best tutorials I've come across so far.

[@eddie_thinhle]

You rock! I came to see your video in 2021 and learned such useful knowledge about using Firebase with React. Thank you so much!

[@nillkillbillthrill]

Your self-deprecating humor is hilarious! And your relaxed attitude and quick, focused, explanation is damn good. Thank you! Subscribed.

[@xaedowulf]

I seriously thought I had my video playback speed set to "2" when watching this (which Is what I usually do as other tutorial narrations are always pretty slow). Loved the speed and crazy fast typing skills :)

[@obitouchiha2445]

Hats Off man for this great React Hooks and Firestore tutorial. You got a sub here

[@juleschancel6387]

Banged my head on several other videos about react and firebase. yours is just awesome. thanks !

[@notjohnAtall]

Yesy Yes, I did it. Thanks for this. I never really understood deeply how to unsubscribe inside useEffect. This really opened my mind.

[@BaylorBreaksItDown]

Thank you, that is awesome to hear! I’m glad you found it helpful. There’s always something cool to learn when using hooks.

[@bugovcizubv]

Very helpful man, quick and to the point

[@Smile-to2ii]

you are a gem. I wish i could buy a coffee for you

[@vincesavvy2844]

Dude, that was amazing!! I never used hooks before, I was looking for a tutorial on how to implement login with google and found this instead... That was just WOW! Instant subscribe + notif bell... I'm never not using this in all my future projects!

[@tucker1351]

You are a weapon, best tutorial i've found and you're hilarious. Many thanks!!

[@popaname]

You're like a wizard! Thank you so much been struggling all day finally found my answers.

[@titus6723]

THANK YOU! i was getting infinite console logs from the subscription every which way i wrote my code. Its working now :) I was stuck on this for a good 6hrs

[@BaylorBreaksItDown]

You’re welcome! I’m glad you got it sorted.

[@rainamra]

This is great! Really help me with my project, like the way you explain things. Make it seems so simple and easy :))

[@jcanguyen1]

Brilliant breakdown. Thanks for making it simple and painless.

[@ioanoltean9868]

The CSS code: body { background: #f2f2f2; } .App { max-width: 700px; margin: 2rem auto; background: #fff; padding: 2rem; border-radius: 4px; box-shadow: 0 2px 4px #ddd; } h1 { margin: 0; } .time-entry { display: flex; justify-content: space-between; width: 50%; } .time { color: #776ad4; } form { background: #f2f2f2; padding: 1rem; border-radius: 4px; box-shadow: inset 0 2px 4px #ddd; } form h4 { margin: 0 0 1rem; } form div { margin-bottom: 0.5rem; } form label { display: block; }

[@oakes680]

goat

[@ihsanashi]

This video was the perfect solution to the issue I was facing with React/Firebase. thank you so much!

[@MartinGarnett]

Such a great tutorial. Very entertaining, yet simple and to the point. 😁

[@saurabhshah23]

Video is awesome bro.. quick sneak-peek into realtime firestore subscription. Your speed is commendable.. fun to see and listen to you.. it was hard to hit that fwd button ;-) haha

[@WackoRulz]

it took me hours to find you, this works

[@yitzchaksviridyuk932]

Awesome video. You kept a really good pace. Thanks :)

[@bonnquez3524]

Thanks a lot for the video man! It's good to get the hands dirty on the basic operations.

[@ashinlaurel5862]

Dude Amazing stuff!! You helped me built a webpage for a company!!

[@BaylorBreaksItDown]

That is awesome!

[@SimulatorMod]

This tutorial is just Hilarious! But also very useful since I'm new to Firestore. Thanks!

[@BaylorBreaksItDown]

Thank you, I appreciate it!

[@shivankyadav8314]

This Is exactly what I have been looking for. He abstracted the data fetching functionality in a seperate function. If you don't do so, React will render blank screen as it takes some time to fetch data from firestore leading to rendering empty component beforehand

[@DooshyDave]

thank you for making this! been struggling all week with this

[@リョウタ-t9o]

I think I want to use the firebase and React.js. this video was so good and I understood how to use about firebase. thank you.

[@BaylorBreaksItDown]

That is awesome. Thank you!

[@iliyanyankov7401]

Thank you ! I've learn a lot. I found your video just on time when I start learning about react hooks, to see how to use them with firebase was really important for me.

[@drewstifler1440]

Learned and entertained at the same time.

[@ewertontertuliano3359]

Thank you very much for this tutorial. I used to set my database as Realtime but from now on is Cloud and based in your tutorial. THANK YOU!!!!

[@shadid2010]

i frigging love you dude! spent an entire day trying to figure this out!! finally got it! thanks to you :D

[@mf2810]

Excellent video - the code is clear and concise and the explanations of the flow are really helpful. Thank you.

[@BaylorBreaksItDown]

Thank you!

[@neilkapadia7]

Very Precise and helpful

[@BaylorBreaksItDown]

Thank you

[@thomasfawkes5440]

Ouah AWSOME work !!! thanks for this video . They are a few day a search to understand firebase with React, I have understand with you. Thanks

[@aaronrothwell7615]

Very concise and informative, loved it.

[@BaylorBreaksItDown]

Thank you!

[@MRCDF7]

Subscribed and liked! Thanks for the very fast explanation that I was seeking! Please do more react and firebase tudorials :D

[@BaylorBreaksItDown]

Thank you!!

[@cztery7]

Thank you so much for this film! You saved my money and a lot of hours I'd spend on Udemy :)

[@BaylorBreaksItDown]

You’re welcome. I’m glad you found it useful!

[@Felipe-pb9gu]

Thank you!!! It would be nice another CRUD project with firebase authentication

[@BaylorBreaksItDown]

That’s a great idea!

[@AndrewOnTestingCars]

Fantastic! Superb video! I loved the way it was simple but was explained with a fully comprehensive example. Thanks very much from Ireland ☘ subscribed!

[@krutomjer]

Awesome video and to the point, I loved it ! Bruh, this is the stuff !

[@krutomjer]

I'mma reply to myself but whatever, this is the stuff we need, not the 45 minutes video of theory

[@BaylorBreaksItDown]

Thank you so much!!

[@danielgreenfield8970]

Wonderful Tutorial, helped me tons!

[@DamiDimension]

Great video, and excellent presenttation. Was having issues with firebase re-rendering. I think I have an idea now

[@BaylorBreaksItDown]

Thank you, That’s great to hear! The unsubscribe callback is easy to miss.

[@AdvaitDhingra]

Thank you so much sir. This video really helped

[@kn58657]

Very helpful stuff! Thank you.

[@BaylorBreaksItDown]

Glad to hear it. Thank you!

[@yogajourney9519]

Very helpful, thanks. Could you make the font bigger next time though? I could barely see it on my laptop. Anyways, thanks again for the great tutorial!

[@bswill5077]

I wish this was bigger fonts. I cant read it

[@akcoder974]

Exceptional video thank u for that..

[@abhisheks1036]

Thank you so much man you helped me a lot!!!

[@BaylorBreaksItDown]

That’s awesome!

[@Jacur1980]

great energy Sir, thanks for the material

[@gregduncan5993]

Thanks for the great tutorial!

[@BaylorBreaksItDown]

You’re welcome, I’m glad you found it helpful.

[@gregduncan5993]

@@BaylorBreaksItDown I have been trying to use firebase in a React app. Watching and trying to follow along and getting no where till I found this video. You nailed it. Thanks again.

[@jumavipe]

I followed and applied all of your tips to my own app, what do you recommned to use to unit test this?

[@MaciekTytko]

Thank You for your knowledge

[@avinashdhar18]

Really found this very helpful

[@malikbrahimi7504]

I like what you've done but ideally you should be able to sort without invoking a separate read. This will increase your usage and cost. This is especially true if you're doing a search filter on change using where on the collection.

[@xaedowulf]

two questions: 1. Does the subscription/websockets connection reduce the number of calls to firestore? (or does the new snapshot entry still cause a new firestore query to happen?) Trying to save on cost 2. Why wouldn't you want to sort the times state/array locally instead of sending another call to your firestore to do it?

[@surendrareddyreddy1913]

oh my god great stuff , i am subscribing

[@pjalmeida8732]

Can you make a CRUD with this video example?

[@KeithPrice-OurBusinessHero]

Does this tutorial cover how to limit which data a logged in user can read and/or write?

[@FahimMahmudChisti]

Thank you so much for a great tutorial!

[@iammetelskiy]

You are great lecturer!:)

[@a3oao]

This is awesome! Thank you!

[@BaylorBreaksItDown]

Thanks!

[@armanrozika]

Hi Baylor, awesome video. I want to ask about onSnapshot, how it worked? I mean, it is so fast (like, instantly), even when I change network to slow 3G in devtools, it still fast. I noticed in XHR tab, when the app made request to firebase, request is still pending, but onSnapshot already fired and change the state in my react app. I thought it will wait until there's response from firebase, but that's not the case.

[@armanrozika]

I just found that onSnapshot will be fired when making request to firebase database, even when request is not success, the app state will be changed. In this case, how to handle error, like network error, lost connection? I know this might be a rare condition, but I am curious haha

[@lemon1879]

Thanks daddy. Watched in double speed.

[@vikasni95]

Everything is perfect.. But plz zoom in ur system screen... We cant see the text... 😊

[@driijko]

Thanks, this was extremely useful to me. Hard to find a Firebase/React tutorial that isn't all about integrating Firebase with Redux, which I don't use. Your onscreen text is a bit hard to read though, even with video streaming at 1080.

[@BaylorBreaksItDown]

I’m glad you found it useful! You’re right, the text is really hard to read. Thanks for watching!

[@nunosantosdev]

Just great...👍

[@kurdi-1919]

It's amazing that he memorized 4 hours is 14400 seconds!

[@craigjohnson8279]

Great video Baylor. Next time please zoom in on the screen. Watching online the font-size is too small.

[@BaylorBreaksItDown]

That is good to know. Thanks for the heads up Craig!

[@studio-v-digital-treasures]

Can you do full crud with update and delete?

[@richalk]

baylor, love your work--can you help a fellow mississippian out and send a link to this css?

[@legendalegenda2617]

+1

[@2ntuan]

Great tutorial! Could you please upload the code to github? Thank you very much!

[@AdrianLopez-zr8oq]

good guide about react hooks and firebase, thanks mate, but just for curiosity, how hell you do for call "useState" hook on a function that´s not capitalize like time-list.jsx xD, after several time i was surrender to capitalize the function for run the app wihout problems... edit: i tried that´s before read a Lee Buckle comment jajaj

[@mohamedalaa97]

please Can you make font bigger on your VS code ? I cant read your code

[@0sung]

Great video thanks

[@victorsoriano9841]

Great tutorial!

[@BaylorBreaksItDown]

Thank yiu

[@sharqyyem]

Great tutorial Thanks bro

[@sergeyplotnikov5031]

It is fantastic!!

[@rustonemperua5382]

17: 37 lol. Nice comment. Subscribed!

[@daveckw]

Hi, do you have the sample code for this tutorial?

[@kbshegde8539]

Can you provide source....Super explanation

[@AshleyTennyson]

sometimes on console snapshot debugger is working but mostly showing snapshot is not defined and it is not reading any data from our firestore, showing docs: array[0], even in firestore database there are two id .

[@BaylorBreaksItDown]

Any chance you can upload to github and I’ll take a look.

[@AshleyTennyson]

I solved that problem somehow, I just need to ask ,if we need to add a delete option also how and where to write it.

[@justinsmith6544]

Any chance you can say how you solved this? I am facing the same issue.

[@AshleyTennyson]

@@justinsmith6544 Yeah, that was solved , my error was i was using name of the collection wrong, Instead of Notifications i was using Notfications , small typo . Just make sure you are using right collection/database name. :)

[@obitouchiha2445]

I have a question...I have a form in a different component which I used to store data in firestore. When I submit that form I want to show a message like 'successfully added' but what is happening there is that all of my states in that form component is going their default value....it's like the whole is restarting so the form component states are going their default value...any solution would be really appreciated

[@BaylorBreaksItDown]

Double check the onSubmit event handler is calling preventDefault. While I’m not sure that’s the problem, it might be. If you can to share a link to the code for the component somewhere I’d love to take a look and see if I can help.

[@BaylorBreaksItDown]

It looks like the app is rerendering from GetDataFromFirestore in the App.js component. That function, subscribing to firestore and calling setState, is causing the entire App.js component to rerender. In turn, the router, route, and the AddProduct components are also rerendering and resetting their states. The problem is resolved when you move your Firestore subscription to Home.js because you are pushing that state change to the child component, which doesn’t cause the entire tree to render.

[@zotyovegh]

May I ask how is it possible to retrieve only 1 object by an index? Let's say you have saved 20 times above, and willing to write out who was the 3rd fastest. I am doing something in my code where I need such thing, but 'times[2].title' just doesn't return anything and drops an error: 'TypeError: Cannot read property 'highscore' of undefined' When I use a manually created list, the code above returns the 3rd fastest time correctly. But with the list we are working here, that is retrieved from firebase, it just doesn't work. If I try to print out: console.log(times[2]), the object is displayed beautifully. But after writing the '.title' there, it isn't. Do you have a solution for such scenario? Or probably straight ask the firebase which is the 3rd time in the database?

[@BaylorBreaksItDown]

I think you’d want to use the +startAt+ and +limit+ query methods to offset the first result returned. Firebase will likely return an array, but it should only be a single item. Let me know if this works, this is an interesting addition.

[@BaylorBreaksItDown]

Also, I think when you are referencing the +times[2].title+ and it errors, this is because the array starts out empty and JavaScript is returning +undefined+. Another solution would be to check if it exists with an &&. const thirdTime = times[2] && times[2].title Or using a ternary to have more control over the output const thirdTime = times[2] ? times[2].title : “N/A”

[@zotyovegh]

@@BaylorBreaksItDown Yeah this second one is what I was looking for! Thank you very much, I have wasted so much time on this issue, and had no clue why didn't it work... Also, your response time is exceptionally fast! Thanks man for the help!

[@BaylorBreaksItDown]

Thank you and I’m glad I could help!

[@MonkeyDLuffy-tp3ln]

very nice. thanks bro!

[@AnanthalakshmiSankar]

Baylor you are lazy.. haha! This is a really good watch.

[@TheFiredesign]

Thanks man!

[@bengrandin2646]

Hi Bayor! First thanks for this short tutorials! Good speed, clear elocution, and minimalist. At 12:20, why do you create a function useTime ? I nearly finish the video and only saw that. Is it recommended to use useEffect in another function ? I didn't knew that you could. Here how i made it : gitlab.com/BenGrandin/react-hooks-firebase-clock/blob/master/src/Components/timesListComponent.jsx FYI : I am a junior developper.

[@BaylorBreaksItDown]

This is a great question. I extracted out the `useTimes` function to remove the dependency of the Firestore query from the component. I like writing my components with only the minimal data fetching and event bindings. It makes them easier to reuse and it also makes it easier to reuse the query to fetch all the times. As for using hooks in other functions, yes you can totally abstract them away from their usage. I personally like it since it isolates their logic and I can return helpers to create my own DSL. For instance, if I had a counter, I might have a function `useCounter` that returns the current count and helpers for `increment`, `decrement` and `reset`. Thanks for the question and if I haven’t answered it perfectly let me know.

[@bengrandin2646]

​@@BaylorBreaksItDown Thanks for this answer ! With your way of doing, tell me if i'm wrong, but you fetch data every time you sort them. I guess it isn't really necessary. I separate the fetching data from sorting them (in my app.js). Could be important in real app, cause Firebase price depend on how many calls do you make. Correct me if i'm wrong :) Thanks again for your short and well explain tutorial

[@BaylorBreaksItDown]

That's a good point, but I think it's okay in this case. `useEffect` is bound to only run when the value of `sortDirection` changes (see link to code below). You're correct that it will incur additional costs since the sorting happens inside Firestore rather than on the client. gist.github.com/BaylorRae/2050fce4a5293fe2448299bcadffd192#file-app-js-L24 Generally speaking sorting/filtering occurs at a macro level in lists. For these cases I would let the database engine perform the sorting to avoid the potential of over taxing the client. However, you bring up a good point that Firebase charges based on reads and depending on your application it might make sense to use an additional database for searching.

[@tatendabako6363]

This guy types really fast... Geeezz

[@nicolasdupere]

Love it!

[@hernaan9]

really good! thank you

[@OICG]

I am getting this error :( TypeError: unsubscribe is not a function

[@peresola3885]

wow! thanks for the tutorial

[@anoopkg8681]

thanks, please increase font size in further videos

[@nicotomomate]

Great video! Please Zoom the code next time

[@akshayshewate6812]

Clean code good

[@neoprint3d]

hey can u post on githib