As always, an amazing material, Sam! You nailed the question I (and other folks) had from your previous video. Please keep up with more content! Cheers
Awesome demo. The DX is really so much more improved with this architecture. I'm excited to see this make its way into more libraries when Suspense is finalized
It's interesting to note that the SWR docs have a warning at the topic saying "React still doesn't recommend using Suspense in data frameworks like SWR (More information)"
I guess SWR may not be getting as much attention since RSC replaces a lot of the use case for it. Still useful though and there will still be use cases for client side data fetching, and suspense is definitely ready to go!
Another great video, one question, how would you trigger a refetch from your error state? The fetch happens in the child but we have caught the error in the parent. How to add a retry button. Thanks again for the stellar content
Thanks for your helpful video. Just wondering is Suspense and Error Boundaries works if I originally fetch my data using anonymous async function in useEffect with axios in the component? Since I saw you are using useSWR. Thanks again.
Nice Video and thanks for sharing. It seems the tradeoff here is a bit of performance (Creating Network waterfall) since the app needs to wait for the whole content to load.
Hey, love your videos, can you show more about how we can optimze coding speed? I see you grab all your stats with vs code, maybe you can create a small video about that if you have time.
Hey Sam, I'm guessing you're using vim motions in your editor. What is the shortcut you're using to select next occurrence of tag @1:27? Like when you highlight the line using visualLineMode, and then highlight the next matching lines and then go ahead to edit them. What is the key combo for doing that?
1:27 Any chance you could do a really quick screenshare of how you're doing that multiple cursor suspense tag nesting thing? I might be the last developer in the world to adopt multiple cursor editing!
The child component throws a promise that resolves whenever its data fetching is complete. That's how the parent knows if it's loading (promise is in a pending state) or it's ready (promise is resolved). I talk about it some here: ruclips.net/video/FpFetyxapto/видео.html
@@samselikoff so component is just a function but its not marked with async if it has await in useEffect for example, i havent looked at FC return type to know precisely... there is no concept of sync and async components, im not sure its trivial for parent component to detect pending state of the child, it requires data from inside react itself, thats why only React team could implement such component like Suspense, sorry i didn't explain this very clearly, but it frustrates me that even React docs explains how to use it without clearly explaining how it works inside, almost presenting it like its magic or black box
Your videos are so calm, well explained and cover important topics. One of my favorite React related channels 😍
Yo this is so ILL holy f**k I'm in awe.
As always, an amazing material, Sam! You nailed the question I (and other folks) had from your previous video. Please keep up with more content! Cheers
I'm just binge watching all of your videos. You explain concepts really really well! Thanks!
I like your thought process Sam. I’d pay for a course if you decide to make one
That means a lot - thank you so much!!
I would pay too. I really liked the tw course on egghead
Awesome demo. The DX is really so much more improved with this architecture. I'm excited to see this make its way into more libraries when Suspense is finalized
I have never used suspense before... I am sold and will now be checking out your other two videos!
Simple demo but executed beautifully.
Great example, and very clearly explained. Thank you!!
Simple , clear and easy to follow along
So clean explanation and calm presentation. Loved it :)
This was excellently delivered.
Well thought out presentation to the subject based on made-up business requirements.
Thanks for making your videos short but very helpful
Thank you!! I didn't know SWR.
Thank you for this video, really helpful!
really good explanation, thank you
you just got yourself a new subscriber and lurker
Good explanation, thank you much
I use this to catch a chunk 404 when I have pushed a new commit. I reload the page when that happens. So far that works great 😉
thank u for this great quality content
Awesome video, thanks
It's interesting to note that the SWR docs have a warning at the topic saying "React still doesn't recommend using Suspense in data frameworks like SWR (More information)"
I guess SWR may not be getting as much attention since RSC replaces a lot of the use case for it. Still useful though and there will still be use cases for client side data fetching, and suspense is definitely ready to go!
Thank you
Another great video, one question, how would you trigger a refetch from your error state? The fetch happens in the child but we have caught the error in the parent. How to add a retry button. Thanks again for the stellar content
Thanks for your helpful video. Just wondering is Suspense and Error Boundaries works if I originally fetch my data using anonymous async function in useEffect with axios in the component? Since I saw you are using useSWR. Thanks again.
Thanks
Hi! Thanks for your quality content. When error happens, is there any way to add a try again button that will try to call api again?
Nice Video and thanks for sharing.
It seems the tradeoff here is a bit of performance (Creating Network waterfall) since the app needs to wait for the whole content to load.
From a user's standpoint, one loading spinner is much less stress inducing than three
Can you explain what shortcuts you used to select your component and then wrap it with Suspense at 1:30?
What is this VS Code shortcuts sorcery?? Good explanation. I like your style.
Mind if I ask what's your VS setup like and shortcuts?
what editor do you use?
i use neovim and am not sure how i would do the multiline edit as you are doing.
I use VS Code with the Vim extension
Hey, love your videos, can you show more about how we can optimze coding speed? I see you grab all your stats with vs code, maybe you can create a small video about that if you have time.
I should make a React focused video but for now check this one out! ruclips.net/video/qIHR2wmxy3U/видео.html
Hey Sam, I'm guessing you're using vim motions in your editor. What is the shortcut you're using to select next occurrence of tag @1:27? Like when you highlight the line using visualLineMode, and then highlight the next matching lines and then go ahead to edit them. What is the key combo for doing that?
Ctrl + D for every next occurrence you are willing to select -> Ctrl + Shift + L to match all occurrences at once
@@user-pr4ez7hn6u Is that specific to VSCode? Cause Vim has a mapping of PageDown to Control+D
@@user-pr4ez7hn6u Although, Cntrl+Shift+L is working as you said 👍
Hi Sam. I've been searching for how to do this code formatting trick at you pulled off at 1:26 . Can you please tell me how you it's done?
+D on Apple in VSCode, it's called "Multiple selections" code.visualstudio.com/docs/editor/codebasics#_multiple-selections-multicursor
@@samselikoff thanks but i happen to be on windows.
1:27 Any chance you could do a really quick screenshare of how you're doing that multiple cursor suspense tag nesting thing? I might be the last developer in the world to adopt multiple cursor editing!
Check out this timestamp from my Shortcuts + Extensions video! ruclips.net/video/qIHR2wmxy3U/видео.html
@@samselikoff Perfect, thanks!
How use suspense with fetch, without libraries?
Check out the excellent suspend-react library! github.com/pmndrs/suspend-react
why dont you explain what actual "signal" Suspense component uses to detect that child component fetches something and it is in loading state?
The child component throws a promise that resolves whenever its data fetching is complete. That's how the parent knows if it's loading (promise is in a pending state) or it's ready (promise is resolved). I talk about it some here: ruclips.net/video/FpFetyxapto/видео.html
@@samselikoff thank you
@@samselikoff so component is just a function but its not marked with async if it has await in useEffect for example, i havent looked at FC return type to know precisely... there is no concept of sync and async components, im not sure its trivial for parent component to detect pending state of the child, it requires data from inside react itself, thats why only React team could implement such component like Suspense, sorry i didn't explain this very clearly, but it frustrates me that even React docs explains how to use it without clearly explaining how it works inside, almost presenting it like its magic or black box
But you changed the design. Designers will be unhappy