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!
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!
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 :)
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!
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
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
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
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.
Fantastic! Superb video! I loved the way it was simple but was explained with a fully comprehensive example. Thanks very much from Ireland ☘ subscribed!
@@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.
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.
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?
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!
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
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
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.
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.
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.
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
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?
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.
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”
@@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!
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.
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 .
@@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. :)
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!
This is absolutely correct. Thanks for sharing.
@@BaylorBreaksItDown Thank you for the concise tutorial! Repeat rendering had me stumped for hours before this!
right .. this was the issue thank you for pointing it :3
@@hessaa1712 Gladly :) I was stuck for hours before figuring this out
This is great, thank you! One suggestion: maybe increase font size on the editor, for people watching this on smaller screens.
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!
That is awesome! Thank you!!
Love a tutor who can be professional yet not afraid to have fun and brag about their lockpicking skills. Awesome vid!
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;
}
goat
Your self-deprecating humor is hilarious! And your relaxed attitude and quick, focused, explanation is damn good. Thank you! Subscribed.
Thank you so much. One of the best tutorials I've come across so far.
You rock! I came to see your video in 2021 and learned such useful knowledge about using Firebase with React. Thank you so much!
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 :)
Yesy Yes, I did it. Thanks for this. I never really understood deeply how to unsubscribe inside useEffect. This really opened my mind.
Thank you, that is awesome to hear! I’m glad you found it helpful. There’s always something cool to learn when using hooks.
Hats Off man for this great React Hooks and Firestore tutorial. You got a sub here
Banged my head on several other videos about react and firebase. yours is just awesome. thanks !
Very helpful man, quick and to the point
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!
you are a gem. I wish i could buy a coffee for you
You are a weapon, best tutorial i've found and you're hilarious. Many thanks!!
Brilliant breakdown. Thanks for making it simple and painless.
You're like a wizard! Thank you so much been struggling all day finally found my answers.
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
You’re welcome! I’m glad you got it sorted.
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
This video was the perfect solution to the issue I was facing with React/Firebase. thank you so much!
This is great! Really help me with my project, like the way you explain things. Make it seems so simple and easy :))
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
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.
Such a great tutorial. Very entertaining, yet simple and to the point. 😁
Great video, and excellent presenttation. Was having issues with firebase re-rendering. I think I have an idea now
Thank you, That’s great to hear! The unsubscribe callback is easy to miss.
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!!!!
Awesome video. You kept a really good pace. Thanks :)
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.
That is awesome. Thank you!
thank you for making this! been struggling all week with this
Thanks a lot for the video man! It's good to get the hands dirty on the basic operations.
Learned and entertained at the same time.
it took me hours to find you, this works
Thank you!!! It would be nice another CRUD project with firebase authentication
That’s a great idea!
Subscribed and liked! Thanks for the very fast explanation that I was seeking! Please do more react and firebase tudorials :D
Thank you!!
This tutorial is just Hilarious! But also very useful since I'm new to Firestore. Thanks!
Thank you, I appreciate it!
Dude Amazing stuff!! You helped me built a webpage for a company!!
That is awesome!
i frigging love you dude! spent an entire day trying to figure this out!! finally got it! thanks to you :D
Very Precise and helpful
Thank you
Fantastic! Superb video! I loved the way it was simple but was explained with a fully comprehensive example. Thanks very much from Ireland ☘ subscribed!
Wonderful Tutorial, helped me tons!
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
Excellent video - the code is clear and concise and the explanations of the flow are really helpful. Thank you.
Thank you!
Awesome video and to the point, I loved it ! Bruh, this is the stuff !
I'mma reply to myself but whatever, this is the stuff we need, not the 45 minutes video of theory
Thank you so much!!
Thank you so much sir. This video really helped
Very concise and informative, loved it.
Thank you!
Exceptional video thank u for that..
Thank you so much for this film! You saved my money and a lot of hours I'd spend on Udemy :)
You’re welcome. I’m glad you found it useful!
Very helpful stuff! Thank you.
Glad to hear it. Thank you!
Thank You for your knowledge
Thank you so much man you helped me a lot!!!
That’s awesome!
Really found this very helpful
Thanks for the great tutorial!
You’re welcome, I’m glad you found it helpful.
@@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.
Thank you so much for a great tutorial!
Great video thanks
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.
You are great lecturer!:)
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?
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!
great energy Sir, thanks for the material
Thanks daddy. Watched in double speed.
This is awesome! Thank you!
Thanks!
Everything is perfect.. But plz zoom in ur system screen... We cant see the text... 😊
I wish this was bigger fonts. I cant read it
oh my god great stuff , i am subscribing
Just great...👍
Great tutorial
Thanks bro
I followed and applied all of your tips to my own app, what do you recommned to use to unit test this?
very nice. thanks bro!
17: 37 lol. Nice comment. Subscribed!
It's amazing that he memorized 4 hours is 14400 seconds!
really good! thank you
Clean code good
It is fantastic!!
Great video Baylor. Next time please zoom in on the screen. Watching online the font-size is too small.
That is good to know. Thanks for the heads up Craig!
Great tutorial!
Thank yiu
Baylor you are lazy.. haha! This is a really good watch.
Thanks man!
Love it!
Thanks a lot :)
wow! thanks for the tutorial
Great tutorial! Could you please upload the code to github? Thank you very much!
Does this tutorial cover how to limit which data a logged in user can read and/or write?
Thank you!!!!
Great video! Please Zoom the code next time
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
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
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.
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.
i realy like that
Can you make a CRUD with this video example?
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.
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
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?
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.
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”
@@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!
Thank you and I’m glad I could help!
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.
I’m glad you found it useful! You’re right, the text is really hard to read. Thanks for watching!
Thanks, dude!
Can you provide source....Super explanation
This guy types really fast... Geeezz
please Can you make font bigger on your VS code ?
I cant read your code
baylor, love your work--can you help a fellow mississippian out and send a link to this css?
+1
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 .
Any chance you can upload to github and I’ll take a look.
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.
Any chance you can say how you solved this? I am facing the same issue.
@@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. :)
Great Tutorial! I think your brain moves too fast your mouth LOL
Hi, do you have the sample code for this tutorial?