Hey man really like you calling out what hot keys you're using. It seems a little boiler platey to me but definitely looking forward to more videos on this topic!
Nice video, just one part I don't understand why not utilize the "async" syntax but dive into the promise status checking in wrapper? Btw, I like the sound of your machanical keyboard :)
Great video! With React Suspense can you also make the loading of one component wait for another one to finish first? I am thinking of cases where one components needs the other. Is there something similar like "dependencies" in "useEffect"?
I am working with React Suspense for Data Fetching a while now, but what I didn't get so far is, if it is only for reading of data or also for updating/creating/deleting of it. What I mean is, is this some kind of command query separation and can it replace redux at all (for simple things). What do you think?
So just for clarification : all of this is an alternative to checking if the data exists in the state? I do know that axios does fetching states as well, no?
@@bawad I guess what I'm asking is you could achieve the same as Suspense (with fallback) using async /await with useState (loading..) either side of the the await so why use Suspense
Cool, looks good. Hopefully will come to prod soon. :) BTW... Why do people still use yarn these days? I have so much problems with yarn fetching packages... Most of the time it's sth like "unexpected end of file". I'm switching back to npm because of this.
as of 10/29, ReactDOM.create_root is ReactDOM.unstable_createRoot, and it looks like whatever change was made to the experimental React makes Ben's code not 100% compatible. To get this to work as in the video, I had to clone Ben's repo.
@@bawad it's more like a private one, I just want an example as I don't know where to start with this, and thank you so much for the reply it means a lot.
Then there is a benefit since you had to do something like this in the past, new projects could use this new way once it is production ready. Also, with the context api, this and others FB may be trying to provide the features without having to use redux. Glhf
@@z-a3594 and that has already been resolved with basic components and redux and is a lot easier. Redux also works great for large applications so why do I need this over just handling it in my state change with my reducers
Ben, would you consider adding a mid-tier between 10$ to 15$ patreon membership level ? 5$ is really not enough given the very strong quality of your content but not everyone can give 100$ :)
@@bawad If you have the time, I think high level view of projects can be of interest such as from the start of a project to its full automated deployment workflow in production but that maybe is more of a Udemy (in 5 to 15 hours of content) type of product than a RUclips kind of one. But I know that it has been a real success for other youtubers such as Traversy media full stack MERN Udemy course. Maybe having a restricted access based on membership for a few weeks / months could be a good reward. Anyway, thank you for your content, keep up the good work :)
I am saddened by this crazy abuse of the throw statement. It's pointless complexity IMO. I just use Bluebird promises, they support inspection so I can just render a loading message by checking promise.isPending(). As a bonus, it supports promise cancellation. So we can cancel unneeded fetchs on unmount. 👌
To avoid Suspense, create one state to show loading, when the data arives, inside then, swap loading state with data state. One if, two states, 3 lines of code. 😳 People nowadays will start using libraries even for input fields. Lazy people will destroy programming industry...
Thanks for the Ctrl+Space shortcut for auto-import. Gonna use that one a lot!
I’m a simple guy. I see a new video about react from Ben Awad, I watch it
Count two of us
Three of us
@@BrunoWinck p
Add me in that
Thanks for being consistent 🙏🏽
Hey man really like you calling out what hot keys you're using. It seems a little boiler platey to me but definitely looking forward to more videos on this topic!
great liked the tip for slowing down network operations! Man thats a great tip
Ben awad is the only dev channel i watch nowadays lol
As always great job! I’ve learned a lot from you.
Love how I watched this video 2 years ago and now again since react 18 released 😂
looking forward for React Concurrent Mode series
Thanks for another great feature introduction
Thanks for sharing
"Let's create a person" :D
that's gross 😅
thanks for the explanation!
Very nice introduction. BTW: The name of that person translates to: en.wikipedia.org/wiki/Cyrus_the_Great
Thank you for the wrapPromise
Another example using star wars API: codesandbox.io/s/fetching-data-and-rendering-with-suspense-0g83m
awli bud dadash
I Got This Error
TypeError: react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.createRoot is not a function
Thank you, this is very helpful to me.
Tnx, very useful!!
Thanks, this is inspiring
Hi Ben , can you explain the interruptible rendering in Concurrent mode by an example ?
Nice video, just one part I don't understand why not utilize the "async" syntax but dive into the promise status checking in wrapper? Btw, I like the sound of your machanical keyboard :)
you could do async/await instead of .then just preference
Great video! With React Suspense can you also make the loading of one component wait for another one to finish first? I am thinking of cases where one components needs the other. Is there something similar like "dependencies" in "useEffect"?
With SuspenseList you can declare an order they display in ruclips.net/video/KO8rPRyCZd4/видео.html
Hi Ben, nice vid. One questions. so how React knows when it needs to render the fallback or the content is from the Promise that we throw ?
if you throw a promise, React will show the fallback until the promise is resolved
super nice
I am working with React Suspense for Data Fetching a while now, but what I didn't get so far is, if it is only for reading of data or also for updating/creating/deleting of it. What I mean is, is this some kind of command query separation and can it replace redux at all (for simple things). What do you think?
I think it's more for reading data, but we'll see when data fetching libraries start to integrate suspense in
Ben what do you use that makes your terminal have auto complete and coloring?
benawad.com/theme
benawad.com/vscode
can you do tutorial for table scrolling with suspense?
So just for clarification : all of this is an alternative to checking if the data exists in the state? I do know that axios does fetching states as well, no?
it's a different way to control loading states. It's goal is to simplify complex loading scenarios
@@bawad Thanks!
noob question: does Suspense work in react-native?
I'm not sure if it works right now, but it will
Might be a bit OOT but try Flutter. It has something like this but called FutureBuilder Widget!
as long as its JS it work
Can we do post and put with suspense??
I don't see why not, I'll show an example in the next video
I have a question, is suspense some sort of try/catch React component? like, when any of its children throws an error, it renders the fallback?
yeah kinda
I think it works on top of the ErrorBoundary component and does some polling to retry re-rendering the component
Hi Ben is Suspense preferable to async/await why would you choose one over the other ? BTW the videos are really helpful !
Suspense works with promises you can use .then or async/await syntax just comes down to preference
@@bawad I guess what I'm asking is you could achieve the same as Suspense (with fallback) using async /await with useState (loading..) either side of the the await so why use Suspense
It seems like a dirty hack to me, throwing something to make it work.
for basic examples it's easy to emulate with useState, but Suspense will be helpful for more complex scenarios
i think i saw suspense last year by dan at some conference lol
Well its released just now !
@@piyushgupta809 experimentally or official?
Cool, looks good. Hopefully will come to prod soon. :) BTW... Why do people still use yarn these days? I have so much problems with yarn fetching packages... Most of the time it's sth like "unexpected end of file". I'm switching back to npm because of this.
interesting, I've had a better experience with yarn
How'd you make your cursor change from line to block on move?
shift-v in vim
Can I use suspense within the Num and Person Components?
You have to make sure wherever you call the function to get the data that you wrap that component in Suspense
Hello sir... how your IDE show the curly brackets connected yellow line.
benawad.com/theme
you could try installing bracket pair colorizer
How can this be applicable to using graphql endpoints and Apollo package?
When this is released Apollo will probably build an api around it, so we can start using it to handle loading states there too
that gyp error on macos freaks me out.
same
9:30 "Unexpected name of a person"
after read()
console.log the person to see what it looks like
RUclips success... Haircut... Lost the glasses... If you're working out as well then you're leaving us and joining the Chad Army. 😨
accidentally googled the Chad Army
guess this is not what you meant 😆
you should come join the Chad Army, it's pretty nice on this side
Amazing video and well explained
+1 subscribe 😍
welcome :)
I've already used this feature 4 months back in production.
for some reason i'm getting person.name.first is undefined, network request is good
same exact code
if I had to guess github.com/benawad/react-suspense-example/blob/1_suspense_intro/src/PersonApi.js#L4
as of 10/29, ReactDOM.create_root is ReactDOM.unstable_createRoot, and it looks like whatever change was made to the experimental React makes Ben's code not 100% compatible. To get this to work as in the video, I had to clone Ben's repo.
can you do a video on how to secure your graphql API? like creating role based requests and API keys and tokens... etc
if you want to setup API keys, are you wanting to do a public graphql api?
@@bawad it's more like a private one, I just want an example as I don't know where to start with this, and thank you so much for the reply it means a lot.
here's an auth example ruclips.net/video/qCnQgZzoIMM/видео.html
That is a lot of code for loading feedback
I am a beginner in react can you please let me know How is this better than axios or fetch?
Actually, this is not meant to replace axios or fetch. It's a way to "automatically" render a loading when your are fetching the required data.
10:48
So... much... boilerplate...
That's was Persian name
I don't see the benefit. I can already do this in a clean organized way using redux.
Same here (not with redux though). I'll wait for the official release to see the actual benefits, if any
read the documentation about the React Concurrent Mode as well as data waterfall
Then there is a benefit since you had to do something like this in the past, new projects could use this new way once it is production ready. Also, with the context api, this and others FB may be trying to provide the features without having to use redux. Glhf
@@z-a3594 and that has already been resolved with basic components and redux and is a lot easier. Redux also works great for large applications so why do I need this over just handling it in my state change with my reducers
It's an effort to stop using redux...
Suspense is sexy AF
is apollo going to support suspense?
probably
Wwawat so no need for thunk?
nope
Ben, would you consider adding a mid-tier between 10$ to 15$ patreon membership level ? 5$ is really not enough given the very strong quality of your content but not everyone can give 100$ :)
I would, but couldn't think of a good reward. Let me know if you have any ideas.
Also you can do a custom pledge with any amount
@@bawad If you have the time, I think high level view of projects can be of interest such as from the start of a project to its full automated deployment workflow in production but that maybe is more of a Udemy (in 5 to 15 hours of content) type of product than a RUclips kind of one. But I know that it has been a real success for other youtubers such as Traversy media full stack MERN Udemy course.
Maybe having a restricted access based on membership for a few weeks / months could be a good reward.
Anyway, thank you for your content, keep up the good work :)
I like making that type of content (and probably will make another fullstack project soon), but it takes SO long to finish something
@@bawad There doesn't need to be a reward at Patreon, the videos you already produce are why we would consider donating.
2x speed because your time matter 😉
this is so cringe without TypeScript
I used to be an x parameter guy.
yout type so fast lol
yes and I use vim so it may look like I'm typing fast at times when it's really a shortcut
I am saddened by this crazy abuse of the throw statement. It's pointless complexity IMO. I just use Bluebird promises, they support inspection so I can just render a loading message by checking promise.isPending(). As a bonus, it supports promise cancellation. So we can cancel unneeded fetchs on unmount. 👌
Bro i dont know but it so weird with you looking up, maybe put the camera in your eye level
To avoid Suspense, create one state to show loading, when the data arives, inside then, swap loading state with data state. One if, two states, 3 lines of code. 😳 People nowadays will start using libraries even for input fields. Lazy people will destroy programming industry...