How does react Suspense work?

Рет қаралды 24,864

Жыл бұрын

good read: dev.to/darkmavis1980/a-practi...
💬 Discord / discord
🤑 Patreon / webdevjunkie
🔔 Newsletter eepurl.com/hnderP
📁. GitHub github.com/codyseibert/youtube
My VSCode Extensions:
- theme: material community high contrast
- fonts: Menlo, Monaco, 'Courier New', monospace
- errors: Error Lens
- extra git help: Git Lens
- tailwind css intellisense
- indent rainbow
- material icon theme
- prettier & eslint
- ES7+ React Snippets

Пікірлер: 21

@sachinahya7502 Жыл бұрын

The main benefit of Suspense is that it helps write simpler components that don't care about the network status of their data, they can just assume the happy path where the data is always available. The Suspense fallback can be triggered by any of its deeply nested children which gives you more control over layout shift, compared to having lots of child components each rendering their own fallback.

@malhar016 2 ай бұрын

I really liked your way of "going through -> asking -> thinking -> assuming -> and understanding it on the go"... type of approach. Sometimes I feel overwhelming by other know-it-all kind of videos, which makes you feel small about not knowing what they know very easily. Keep it up dude.

@alessiomichelini4171 Жыл бұрын

Btw I don't set the success as it will fallback to default anyway, what you want to catch is if you have either an error or pending, and throw an error with those, everything else should just return the response, because Suspense what it does it's just listening if a block of code is throwing any error, if it throws it handles as a loading state, if it doesn't it means that the code is ready to be shown

@skittlznt2611 Жыл бұрын

I literally came to Utube after reading that exact article and walking away a bit confused. Funny that I landed on this video explaining it. I love your disorganized style of teaching btw. It's refreshing to see someone ask the same questions that are popping around in my head.

@alessiomichelini4171 Жыл бұрын

I'm glad you liked my article, and thanks for the link!

@SahraClayton Жыл бұрын

Hi Cody, on line 27 in the wrapPromise file, how does handler[status]() work. I haven't seen syntax like this since I have been learning, I have seen something similar with square brackets but not with parenthisis afterwards.

@jersoncarin1952 Жыл бұрын

it just calling the callback function by key

@atkevindsouza Жыл бұрын

handler is of type Object void> So handler[status] gives the value at key `status` which is a function, which is then invoked using the ().

@dcknature Жыл бұрын

Learned about react Suspense thanks to your channel ☺️👍!

@nguyentrunghieu6200 Жыл бұрын

Hello, I have a question. How does React know when to render the suspended component? Does React verify if the component belongs in the viewport?

@codinginflow Жыл бұрын

Thank you, that was super interesting. It's probably good that NextJS hides a lot of this complexity.

@kerovinvillegas6402 Жыл бұрын

Thanks for this. My job title is "Senior" react dev but I'm still using console log for debugging/testing things out. Just found it funny to know there are devs out there like me. I know there are better ways but yeah I like it haha

@apharos Жыл бұрын

there are 2 types of devs: Those that use console.log / print to debug and liars