Hey everyone, I forgot to fix something in the video. In order to prevent infinite reads and in order for the delete to refresh after a post is deleted, you need to change the useffect in the home page to the following: useEffect(() => { const getPosts = async () => { const data = await getDocs(postsCollectionRef); setPostList(data.docs.map((doc) => ({ ...doc.data(), id: doc.id }))); }; getPosts(); }, [deletePost]);
I changed the code as you guided. But still it reads infinite times. Actually the problem is with the setPostList(). When you just console log the data useEffect(() => { const getPosts = async () => { const data = await getDocs(postsCollectionRef); console.log(data); }; getPosts(); }); The data is fetched just once. But when you include setPostList(), useEffect(() => { const getPosts = async () => { const data = await getDocs(postsCollectionRef); console.log(data); setPostList(data.docs.map((doc) => ({ ...doc.data(), id: doc.id }))); }; getPosts(); }); it results in a large no of reads.
@@nithinm0836 Sorry dude, adding the deletePost where Pedro says, refreshes the delete page but keeps looping the database and I've reached my quota in firebase because of that. I am still checking how to have both, refreshing and stop the crazy loop. So, I would recommend everyone to keep the array empty until further solution is found.
Have been watching your entire firebase v9 videos. This really helps, although I'm a frontend dev who rarely stores authenticated users data and this is very handy as we don't have to deal with complex backend stuff. Since you have been teaching us about Firebase Firestore and Auth, what about including Firebase Cloud Function and Hosting for the next course? Really appreciate it Pedro ✌️
Hey it's me again! I was looking for such a video on youtube and I saw you had one on it. I instantly told my friends that I'd be returning with a basic functioning knowledge of firebase react the next day. you have a way of keeping things short but to the point. I havent started watching the video yet but I know it'll be great! (hopefully no errors xd) but THANKS A TON!
Thank you so much for making this! I haven't done any CSS to this yet but it looks SO COOL! I'm going to try and make a Kanban board with this. I have been studying backend stuff and object oriented languages for most of the time I've been studying CSC (and in university), and it's so great to finally be able to break into frontend. Thank you!
I forgot to do this in the video but yes, you do add a dependency array. And to re-render automatically post deletion you can just add the "deletePost" function to the array.
Beautifully simple and easy to follow video. Thank you so much! This is a great tutorial for just setting up a workspace for developing a website in general imho. I mean, if you can make a blog like this, you can basically make anything.
Thank you so much, this is exactly what I needed! Looking back at Pedro's original code, could you please explain why useEffect creates an infinite loop error when deletePosts is placed within the dependcy arrary? Why is it not only rerendering once whenever I delete something? Why does it instead rerender infinitely without me deleting anything?
@@cosmovandam When we want to delete a post we call the deletePost function which call the getPosts() function. Inside the getPosts() function you set a new state (setPostsLists) to store Posts. So if you put deletedPosts inside the dependency array, the state will be updated and rerender infinitely. Hope it helps !
I would post this, I'm not so used to front end... when I saw it had made 50 thousand requests, quota exceed! I just forgot to put this: useEffect(() => { console.log("Effect called"); getPosts(); }, []);
I'm doing the same project but with a few changes. The users have their own page where they can see all their blogs. The delete button isn't on the homepage but on the user's own page inside the blog content card. I'm also going to try to add a feature so that the users would be able to update their blogs. Also, if time permits, I would even like to add a feature to enable the users to add tags to their blogs, and a search bar on the home page so that the users would be able to search by title, tags, or blog authors.
src\pages\Home.js Line 16:6: React Hook useEffect has a missing dependency: 'postsCollectionRef'. Either include it or remove the dependency array react-hooks/exhaustive-deps
Excellent Project, Thank you pedro. The only thing i couldnt comprehend is how you extracted the data . I mean this part "setPostLists(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));". Could you explain in the forthcoming videos how to easily extract data no matter how deeply nested objects are.
Bang on Thanks pedro for this CRUD WebApp Few Points to mention 1. Hey Pedro have you updated you React Playlist according to increasing complexity 2. If possible next time make video on Intersection-Observer-API
A lot of people are commenting this hahaha I don't know why I thought of posting this or why everyone wants to make a blog at the same time, but I am happy hahaha
Hello pedro, I noticed you do not have any videos about Docker or Nginx. It would be nice to create one coz this topics can move past an intermediate developer to advance. Keep it up brother.
hey pedro, you are the only person I understand on youtube so please help guide me, I made a project, it has auth, a blogspot like this and some ecom stuff, Ihave used react and firebase for all the stuff, is it good enough to write on the resume to grab an internship
Thank you! I am still studying more and more about web3, when I feel like I can comfortably explain I can make a video on it :) I am very familiar with crypto, however all of the nft / metaverse stuff is new to me.
Thanks for this video it was very helpful. a single thing. when I check the console in the browser it tells me that each item in the list has to have a key. Which one can I use and where would you put it? Cheers
This might be a stupid question, but I am trying to follow your tutorial step by step and when I am trying to open the project in browser, the "npm start" does not work. Why?
Hello, I am really glad I found this video and your channel because they are really great, and I was looking for this short of a video for a while now. I have a question not so related to a problem, what kind of hosting would I need to use to run a site like this? Thanks :)
please help src\pages\CreatePost.js Line 26:6: React Hook useEffect has missing dependencies: 'isAuth' and 'navigate'. Either include them or remove the dependency array react-hooks/exhaustive-deps src\pages\Home.js Line 16:6: React Hook useEffect has a missing dependency: 'postsCollectionRef'. Either include it or remove the dependency array react-hooks/exhaustive-deps
Another great tutorial! For some reason, my posts wont update when I delete a single post. It DOES indeed delete from the database, and does refresh DOM after manual refresh, but it's not updating immediately. I have the function async, and in a useEffect. IDK? Help someone!?!
I creating my blog with react and firebase. The texts i am using are longer and have some white spaces between the paragraphs for easier reading. But firestore only stores strings in a continuous line and i cant display the text way i wanted. Is there a way the handle this?
Thank you so much but im trying to connect to the database but im getting a Module not found: Error: Package path ./firstore is not exported from package? any solutions anyone? The auth is working fine...
In the morning i was searching for a react blog tutorial in YT. And i couldn't find a decent one. Now he has just uploaded a tutorial about react blog. Lemme ask you man What kind of ML are you using to read Subscribers mind?
Hey!! I had a doubt, while I was signing in through google the navigation component changed to the second state with the logout button but as soon as I clicked the create post button the navigation component goes back to the previous state. Please help me... Awesome vid bye the way.
Hi Pedro tech when i was running my code i am getting this error Module not found: Error: Can't resolve 'firebase/auth' in 'C:\Users\DELL\sampleprojects\src' could you please help me
Hey everyone, I forgot to fix something in the video. In order to prevent infinite reads and in order for the delete to refresh after a post is deleted, you need to change the useffect in the home page to the following:
useEffect(() => {
const getPosts = async () => {
const data = await getDocs(postsCollectionRef);
setPostList(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
};
getPosts();
}, [deletePost]);
Please do more firebase tutorials. This is amazing!
I changed the code as you guided. But still it reads infinite times. Actually the problem is with the setPostList(). When you just console log the data
useEffect(() => {
const getPosts = async () => {
const data = await getDocs(postsCollectionRef);
console.log(data);
};
getPosts();
});
The data is fetched just once. But when you include setPostList(),
useEffect(() => {
const getPosts = async () => {
const data = await getDocs(postsCollectionRef);
console.log(data);
setPostList(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
};
getPosts();
});
it results in a large no of reads.
deletePost function needs to be moved above useEffect
@@dmitrisamo5129 yeah I moved it. Otherwise it would be an error. Did it work for you dude? Can u share ur code if possible?...
@@nithinm0836 Sorry dude, adding the deletePost where Pedro says, refreshes the delete page but keeps looping the database and I've reached my quota in firebase because of that. I am still checking how to have both, refreshing and stop the crazy loop. So, I would recommend everyone to keep the array empty until further solution is found.
Literally the best timing ever. I was just trying to figure out how I wanted to build my blog and you came in clutch, thank you so much Pedro!
Im glad to hear it :)
I can't thank you enough man, this is a beautifully structured extremely clear tutorial. I hope your channel keeps growing!
I only watched for 1 min and you have my like, I can't wait to build my blog, thanks a lot!
Have been watching your entire firebase v9 videos. This really helps, although I'm a frontend dev who rarely stores authenticated users data and this is very handy as we don't have to deal with complex backend stuff. Since you have been teaching us about Firebase Firestore and Auth, what about including Firebase Cloud Function and Hosting for the next course? Really appreciate it Pedro ✌️
I am very happy that your channel got me too early in my react learning in beginning 🥳
literally wanted to build a blog, you came at just the right time :)
:)
I really love watching Pedro simply because, he's teaching very simple and understandable on a perspective of a beginner. :)
naks sayo
@@johngeronimo8821 paturo react
Hey it's me again! I was looking for such a video on youtube and I saw you had one on it. I instantly told my friends that I'd be returning with a basic functioning knowledge of firebase react the next day. you have a way of keeping things short but to the point. I havent started watching the video yet but I know it'll be great! (hopefully no errors xd) but THANKS A TON!
I was just needing this man, been looking for firebase good content but its really hard tho, Thxz a lot Pedro, really appreciated!
Thank you so much for making this! I haven't done any CSS to this yet but it looks SO COOL! I'm going to try and make a Kanban board with this. I have been studying backend stuff and object oriented languages for most of the time I've been studying CSC (and in university), and it's so great to finally be able to break into frontend. Thank you!
Thank you bro, best way for me to learn is to implement new things to my old projects! Thank you again!
Me too!
52:35 do add an empty dependecy array in useEffect, just to avoid re-rendering of component from firebse in an infinite loop
since we are adding an empty dep. array here, your home screen will no longer auto re-render on post deletion, take care of that thing
I forgot to do this in the video but yes, you do add a dependency array. And to re-render automatically post deletion you can just add the "deletePost" function to the array.
This is important. Having an infinite loop of reads would mean Firestore's read quota would be hit within minutes.
@@PedroTechnologies it still infinite loop of reads
Thanks, this is a good learning lesson. I will rip it apart over and over.
I really enjoyed this video! Thank you! from South Korea
Man, this is absolutely fabulous. I was thinking of every loopholes and you were instantly fixing it. Lots of respect 🔥🔥
Beautifully simple and easy to follow video. Thank you so much! This is a great tutorial for just setting up a workspace for developing a website in general imho. I mean, if you can make a blog like this, you can basically make anything.
Dude, I was looking for something like this yesterday. You're awesome. Congratz from BR.
Recently this happens to me with several channels 😅
Hahaha I am happy to hear this :)
Wow you really out did your self with this one, you get my thumbs up!
Great job Pedro, useful Firebase video
Thanks Pedro, this was a very clear and well-structured and easy to follow explanation!
Thank you so much for this tutorial Pedro! It really cleared up some of my doubts.
Pedro is our dear savior, thank you so much buddy
Bro your way of teaching is bliss. I liked it
really wanted a blog app. and just in the first line of yt reccomendation it popped up and thnks God
Hahaha the algorithm reads our minds :)
Yep, I am the first to like comment and share! :-) Amazing video!
Thank you so much :)
With the code below, you prevent infinite loop and you won't have to reload to see the updated posts
const getPosts = async () => {
try {
const data = await getDocs(postsCollectionRef);
setPostLists(
data.docs.map((post) => ({
...post.data(),
id: post.id,
}))
);
} catch (err) {
console.log(err);
}
};
const deletePost = async (id) => {
const postDoc = doc(db, "posts", id);
await deleteDoc(postDoc);
getPosts();
};
useEffect(() => {
console.log("Effect called");
getPosts();
}, []);
Thank you so much, this is exactly what I needed!
Looking back at Pedro's original code, could you please explain why useEffect creates an infinite loop error when deletePosts is placed within the dependcy arrary? Why is it not only rerendering once whenever I delete something? Why does it instead rerender infinitely without me deleting anything?
@@cosmovandam When we want to delete a post we call the deletePost function which call the getPosts() function. Inside the getPosts() function you set a new state (setPostsLists) to store Posts. So if you put deletedPosts inside the dependency array, the state will be updated and rerender infinitely. Hope it helps !
@@dvdcrnn5244i have problem with delete post in home.js can’t install page
I would post this, I'm not so used to front end... when I saw it had made 50 thousand requests, quota exceed! I just forgot to put this:
useEffect(() => {
console.log("Effect called");
getPosts();
}, []);
I'm doing the same project but with a few changes. The users have their own page where they can see all their blogs. The delete button isn't on the homepage but on the user's own page inside the blog content card. I'm also going to try to add a feature so that the users would be able to update their blogs. Also, if time permits, I would even like to add a feature to enable the users to add tags to their blogs, and a search bar on the home page so that the users would be able to search by title, tags, or blog authors.
hy, how you query through the post collection? are you get all the post collection, or just get post by the users?
Bro, you deserved millions of subscriber.
Error in /~/pages/Home.js (59:29)
Cannot read properties of undefined (reading 'name')
how to resolve this issue!
Awesome content man! Great work. Def going to look for more projects like this to learn soon!
100% Clear and good explanation, its really helped me, thanks for the tutorial
src\pages\Home.js
Line 16:6: React Hook useEffect has a missing dependency: 'postsCollectionRef'. Either include it or remove the dependency array react-hooks/exhaustive-deps
im getting the same error did you figure it out
Awesome tutorial. Just what I needed to get started.
Excellent Project, Thank you pedro. The only thing i couldnt comprehend is how you extracted the data . I mean this part "setPostLists(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));". Could you explain in the forthcoming videos how to easily extract data no matter how deeply nested objects are.
great work mate am a big fan of your channel
Bang on Thanks pedro for this CRUD WebApp
Few Points to mention
1. Hey Pedro have you updated you React Playlist according to increasing complexity
2. If possible next time make video on Intersection-Observer-API
Thank you! I haven't made a playlist arranged like that yet. Might do it soon :) I can take a look at making a video on the intersection-observer-api!
Awesome tut, made me subscribe
At 56:37 in the map function, ...doc.data(), is that data( ) some firebase method? I don't really get it
Amazing video as always pedro!
Thank you! Safe flight
Another awesome video and funny thing is I was looking for blogging platform lol
A lot of people are commenting this hahaha I don't know why I thought of posting this or why everyone wants to make a blog at the same time, but I am happy hahaha
I love your passion. Thanks for the helpful video.
Amazing video man ! helped me alot !! 👑👑👑
Great tutorial easy to follow even for beginners like me.
Excelente tutorial. Obrigado, Pedro.
Many thanks for this beautiful project 💪💪
Hello pedro, I noticed you do not have any videos about Docker or Nginx. It would be nice to create one coz this topics can move past an intermediate developer to advance. Keep it up brother.
What is the name of plugin that calculating size of importing libs?
I really like your videos. Thank you very much. 👍🏽👍🏽👍🏽
Love from Bangladesh come from nasim Vai
How can I order this data?
I tried using queries and replacing the postCollectionRef with the query constant and it didn't work, any help?
You're awesome bro! Thank you for this
Thanks this was very helpful!
Awesome as always 👍
Thank you Abhay :)
Thank you, exactly what i needed...
getting a error in console , " cannot acces deletePost before intialization
HELP!
Amazing, nice teacher.. thank you
Hey, can u teach how to to edit and update in this blog website
You're the best man
How would you add images for each post into the database with firebase ?
amazing tutorial!)
Great Work BRUH !!!!!!!!!!!!!!!!!!
hey pedro, you are the only person I understand on youtube so please help guide me, I made a project, it has auth, a blogspot like this and some ecom stuff, Ihave used react and firebase for all the stuff, is it good enough to write on the resume to grab an internship
great content brooo
Very helpful video keep it up
amazing video! thank you so much!
Thank you! You are best!
Hi can you show how to add image for the specific blog post?
Loved it 🔥, and also wanted to ask will you make video on web3 or your view on it?
Thank you! I am still studying more and more about web3, when I feel like I can comfortably explain I can make a video on it :) I am very familiar with crypto, however all of the nft / metaverse stuff is new to me.
Hi Please help me the submit button in createPost.js does not do anything I tested by console logging. seems like the prob is the await
Thanks for this video it was very helpful. a single thing. when I check the console in the browser it tells me that each item in the list has to have a key. Which one can I use and where would you put it?
Cheers
This might be a stupid question, but I am trying to follow your tutorial step by step and when I am trying to open the project in browser, the "npm start" does not work. Why?
amazing project!
thank u so much man
How I can create a page detail? Because you show all description in home, how could I show only a part and all other content in the detail page?
amazing video. thanks alot
this was a great tutorial. but I am having a problem....my home page is not rendering any posts even after Logging In...Help....
Great video, Pedro! What font are you using in the code editor?
Hello, I am really glad I found this video and your channel because they are really great, and I was looking for this short of a video for a while now. I have a question not so related to a problem, what kind of hosting would I need to use to run a site like this? Thanks :)
please help
src\pages\CreatePost.js
Line 26:6: React Hook useEffect has missing dependencies: 'isAuth' and 'navigate'. Either include them or remove the dependency array react-hooks/exhaustive-deps
src\pages\Home.js
Line 16:6: React Hook useEffect has a missing dependency: 'postsCollectionRef'. Either include it or remove the dependency array react-hooks/exhaustive-deps
Same error for me did you find any fix?
Thanks man 💐💐💐
Another great tutorial!
For some reason, my posts wont update when I delete a single post. It DOES indeed delete from the database, and does refresh DOM after manual refresh, but it's not updating immediately. I have the function async, and in a useEffect. IDK? Help someone!?!
Hey, I forgot to put the deletePost function in the useEffect dependency array. Sorry about that!
thank you so much!
How is the possibility that the user can change the IsAuth value for login from developer tools?
I creating my blog with react and firebase. The texts i am using are longer and have some white spaces between the paragraphs for easier reading. But firestore only stores strings in a continuous line and i cant display the text way i wanted. Is there a way the handle this?
Is FIREBASE a prerequisite for this video ??
it's not. you can still follow along
How do we add properly security rules to our firebase firestore? In order to only have authenticated users manipulate data?
Thank you so much but im trying to connect to the database but im getting a Module not found: Error: Package path ./firstore is not exported from package? any solutions anyone? The auth is working fine...
I also have the same problem, I would be happy to share if it was solved for you, of course, share if you were able to solve it
@@izhaktadesa7379 it was a typo, import from 'firebase/firestore' instead of firstore, i was missing the e in the 'fire'
which visual studio ui extention are you using?
🔴 Another reminder for you to add the timestamps 😅 & keep up the good work 👏💪
Just did! Sorry for the delay hahaha
In the morning i was searching for a react blog tutorial in YT. And i couldn't find a decent one.
Now he has just uploaded a tutorial about react blog.
Lemme ask you man
What kind of ML are you using to read Subscribers mind?
Hahaha I wish I had a ML model to know what to post! I just thought of this video randomly, I am glad people are wanting to watch it :)
This is not safe though, having that delete logic on the frontend is very unsafe and easily hackable
Nice
Can you please make a video on how to upload single and multiple images in firebase storage please
and super video
🤟
bro you don't know how much i love your videos
Thanks for that!
Hey!! I had a doubt, while I was signing in through google the navigation component changed to the second state with the logout button but as soon as I clicked the create post button the navigation component goes back to the previous state. Please help me... Awesome vid bye the way.
Can these articles indexed by google search console?
7:55 yeah bro me too , I too hate doing CSS.
Hi Pedro tech when i was running my code i am getting this error Module not found: Error: Can't resolve 'firebase/auth' in 'C:\Users\DELL\sampleprojects\src' could you please help me
thank you!