DEV Community

React useTransition: performance game changer or...?

Nadia Makarevich on October 23, 2023

Table of Contents Let's implement a slow state update Concurrent Rendering and useTransition for slow state updates The dark side of ...
Collapse
 
jodoesgit profile image
Jo

Nadia, thank you for this. I've hit my "sleepy baby" state. But I've saved this for later, and promise I won't copy pasta. I clicked around in the examples and got the jist as I went. In my sleepy baby state :P!

I actually have been living underground, it's quite comfy. I had no idea that what made React 18 so special is that it now utilizes concurrency. That's good news! Although I've also read that users both expect fast results, yet too fast make them uneasy. Not sure what to think about that.

But the final examples are quite snappy. Especially when towards the middle the Projects component seemingly became a hungry ghost.

Thank you for this, you may or may not know that you did good. But if you're an incredibly modest and humble individual, know you've helped at least one person on their journey!

Collapse
 
adevnadia profile image
Nadia Makarevich

Hahaha, I instantly had an image in my head of a big survivor bunker in the New Zealand mountains with comfy pillows, warm blankets, and fluffy toys everywhere 😅 Comfy!

Glad the article helped at least one person! ❤️

Collapse
 
jodoesgit profile image
Jo

Hahahaha! I like your imagination sister. I have living fluffy toys and I'm pretty sure all day, every day is a cuddle party <3!

Image pet ferret popping out of a sleeve

Thread Thread
 
adevnadia profile image
Nadia Makarevich

❤️❤️❤️

Collapse
 
ekeijl profile image
Edwin • Edited

Hey, thanks for the deep dive article, this is exactly what I was looking for!

Just one question, in this example under 'Memoization to everything', clicking the Projects button still seems to block the UI for the tab buttons, is there something wrong there?

While updating to React 18 I got excited about these new hooks, thinking I could use them to easily fix all UI blocking issues like the one you describe. But I find these hooks not all that intuitive to use and there are caveats. I guess optimizations like these should be applied carefully.

Collapse
 
adevnadia profile image
Nadia Makarevich

Doesn't look like it's blocking, at least, it works for me. I can click on "Projects", and then immediately on "Reports", and reports will become active.

Collapse
 
jodoesgit profile image
Jo

Could it be a browser/extensions or cache issue?

Thread Thread
 
adevnadia profile image
Nadia Makarevich

Everything is possible these days, but I doubt it