You are my favorite instructor, your pace and the steps you take to explain are great! Before the video ends I'm already like "ok that's it, great, can't ask for more on RUclips" and then you say "but we can go one step further" and keep improving the example, I love it, is being really useful to me to understand how we should REALLY structure the code on React. Thank you and can't wait to see more videos! 🙏
Thanks for the video. I've always found handling the difference between "entity is absent" and "entity is being loaded" fiddly and tedious. I've written code which triggers exactly the same bug you demonstrate here (flash of the SignIn component just before the user object is succesfully fetched) dozens of times. Being able to push the responsibilty for handling that loading scenario up the tree in a more generic way is great. The whole throwing promises pattern is still new to me - so thanks for talking through that
I just wanted to say thank you Sam! I found you randomly on RUclips and watched a few of your videos! Especially the ones on React Suspense. I never knew how it worked and you taught me that in just shy of 12 minutes! Now I'm slowly catching up with all of your videos. I love your style of videos.
thank you for sharing. I usually use your first approach but nice to know a new way of doing it. As I know the async function always returns a promise so why you need to manually wrap in a new Promise.
Because the Firebase API doesn’t return a promise! So the async function would return its wrapped promise, but that one would resolve immediately. So we need to make our own, so that we can manually call resolve() within the Firebase callback. Does that make sense?
Ah okay, was wondering about half-way through how the app would rerender if the state changes after initial load cause we now don't have useState. Glad to see you'll talk about that in a future video. Also the last solution with the suspend function looks really clean but it now feels like what I really want to be able to do is simply const user = await getInitialAuthState(). One can dream.
Yep, await getInitialAuthState() directly in a component would be cool (essentially "Async components"), interestingly the React team went down this path but the problem is once you make one component async, you have to make every ancestor async. In other words, async functions "contaminate" their tree. Check out this post for a cool analogy: journal.stuffwithstuff.com/2015/02/01/what-color-is-your-function/
You could just add loading state like you said. It would prevent the need for 3rd party library 'suspend-react'. I like to avoid just blindly installing dependancies.
Thank you for the session. Question about the `Home` component in the GitHub repo. At line 31 (Home component) you still have a check for `user`, but the `suspend` utility will prevent you from getting there. doesn't it? so the `SignIn` in the `Home` will never be used.
Does it really unsubscribe as it does in useEffect clean function? And as promise resolves on firebaseUser it doesn't call unsub() function or does it? I don't get it
How do I get my VS Code to look as clean as yours? I have not seen an option to hide the top bar. This entire set up looks so clean. I am OCD about keeping my environment minimalistic.
Yes you can! You just have to make sure the promise is stable; if you create one during render you'll end up in a loop. (See this note about it in one of the recent blog posts from the team: react.dev/blog/2024/04/25/react-19#use-does-not-support-promises-created-in-render). LMK if you have more questions!
Hello Sam, there is a bug in react-rc when using nextjs. It prevents from using suspence in nextjs. I was told it will be fixed in the next react-rc release. How do you work around that bug? Or have you not come across the said bug?
Sam, I'm always amazed with the quality of your content - thanks so much for your hard work!
Thanks Laura!
Man I don't find these kind of videos elsewhere.
These are so much useful. Thank you so much.
You are my favorite instructor, your pace and the steps you take to explain are great!
Before the video ends I'm already like "ok that's it, great, can't ask for more on RUclips" and then you say "but we can go one step further" and keep improving the example, I love it, is being really useful to me to understand how we should REALLY structure the code on React.
Thank you and can't wait to see more videos! 🙏
Really appreciate the comment Sérgio - thanks so much + I'm so glad you're finding the vids helpful! 🙏
Thanks for the video. I've always found handling the difference between "entity is absent" and "entity is being loaded" fiddly and tedious. I've written code which triggers exactly the same bug you demonstrate here (flash of the SignIn component just before the user object is succesfully fetched) dozens of times. Being able to push the responsibilty for handling that loading scenario up the tree in a more generic way is great. The whole throwing promises pattern is still new to me - so thanks for talking through that
Now THAT'S a powerful computer
ok that was a really neat way of expanding the problem and introducing suspense, super smooth
I just wanted to say thank you Sam! I found you randomly on RUclips and watched a few of your videos! Especially the ones on React Suspense. I never knew how it worked and you taught me that in just shy of 12 minutes! Now I'm slowly catching up with all of your videos. I love your style of videos.
This channel deserves millions of subs. Top quality content always.
Dude, this is so good! Going to eliminate so much extra defensive code, I can't wait to try this.
Not the first time i hear about this, but it's. nice to see more and more explanation of it so it's kinda more clear. Thank you
Just imagine an advanced react course with sam
Excellent video! I love how you break things down.
Thanks for all the great videos. The suspense stuff is really good💪.
Cool. Thanks a lot!
Great as always and loved ur thought process.
Great video, what an awesome explanation. Thanks!
Good stuff
Flipping heck these videos are so good thank you!
"and then our React goes bananas here" made me laugh 😂
Great content as always! Thanks for making such high-quality videos :)
thank you for sharing. I usually use your first approach but nice to know a new way of doing it. As I know the async function always returns a promise so why you need to manually wrap in a new Promise.
Because the Firebase API doesn’t return a promise! So the async function would return its wrapped promise, but that one would resolve immediately. So we need to make our own, so that we can manually call resolve() within the Firebase callback. Does that make sense?
@@samselikoff yes, I got it. thank you.
@@samselikoff Do firebase observables have a .toPromise() method?
Ah okay, was wondering about half-way through how the app would rerender if the state changes after initial load cause we now don't have useState. Glad to see you'll talk about that in a future video.
Also the last solution with the suspend function looks really clean but it now feels like what I really want to be able to do is simply const user = await getInitialAuthState(). One can dream.
Yep, await getInitialAuthState() directly in a component would be cool (essentially "Async components"), interestingly the React team went down this path but the problem is once you make one component async, you have to make every ancestor async. In other words, async functions "contaminate" their tree. Check out this post for a cool analogy: journal.stuffwithstuff.com/2015/02/01/what-color-is-your-function/
This was interesting, thanks!
amazing explain for supense , the last problem talked , i can't understand . produced by signout and signin again ?
Nice thanks
You could just add loading state like you said. It would prevent the need for 3rd party library 'suspend-react'. I like to avoid just blindly installing dependancies.
This is what i thought as well. It looks like something you can solve without suspense
Great video Sam!! Can we complement this video with the one about Suspense in React 18 using motion?
Thank you for the session.
Question about the `Home` component in the GitHub repo. At line 31 (Home component) you still have a check for `user`, but the `suspend` utility will prevent you from getting there. doesn't it?
so the `SignIn` in the `Home` will never be used.
Does it really unsubscribe as it does in useEffect clean function? And as promise resolves on firebaseUser it doesn't call unsub() function or does it? I don't get it
How do I get my VS Code to look as clean as yours? I have not seen an option to hide the top bar. This entire set up looks so clean. I am OCD about keeping my environment minimalistic.
Can you explain a little bit what you did in 6:40, why would the function be called over and over?
How have you made this sign in from console?
So, now React19, we can use use API with Promise directly?
Yes you can! You just have to make sure the promise is stable; if you create one during render you'll end up in a loop. (See this note about it in one of the recent blog posts from the team: react.dev/blog/2024/04/25/react-19#use-does-not-support-promises-created-in-render).
LMK if you have more questions!
Hello Sam, there is a bug in react-rc when using nextjs. It prevents from using suspence in nextjs. I was told it will be fixed in the next react-rc release. How do you work around that bug? Or have you not come across the said bug?
This is not working with next js 13 even when I'm using page directory
why not
for some reason my page render more times when I add Suspense and Error boundaries, weird