React 18 useTransition Hook Crash Course

React 18 recently had its official non-beta release and with it came multiple new React hooks. Of those hooks, the one I am most excited for is the useTransition hook. This hook helps increase the performance of your applications, increase the responsiveness of your application to users, and overall just make your application better. This video is all about how this new hook works.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:30 - Why you need useTransition
01:53 - How useTransition works
03:00 - How to implement useTransition
06:35 - When to use useTransition

#useTransition #WDS #React

[marindedic]

React really needs to start naming their hooks better

[fiqriardiansyah]

so basically it's like web workers who working at background thread

[onurtekingundogdu]

I m not sure what did I wrong.. Before I start I created a fresh project, I checked that react V. was 18. tried to write the same code but could not see the same changes on my screen.
Let me paste the code piece

const LIST_SIZE =

function handleChange(e: {
setInput(e.target.value);
startTransition(() => {
const l = [];
for (let i = 0; i < LIST_SIZE; i++) {
l.push(e.target.value);
}
setList(l);
});
}

[VladDubovyi]

Can you review all of the hooks and react18 updates?

[shinodinhaa]

cool, will let me stop adding lodash to my projects only to use their debounce function hahaha

[timj]

this feels like a good use case for debounce as well, thanks for sharing, you made it super clear!

[roshanlalsahu]

what is the execution order in case of async function?

[Kingofmylife]

that's great usefull.
where is useId and another hooks.

[ADITYA-qril]

You explain a useTraction in a very simple way 🤯

[krishangopal]

Lets say input changes by 1 character and code is called inside startTransition which is still being calculated in the background. When u type some more characters which call that handleChange everytime u type a character, Does that code inside startTransition gets cancelled whenever it runs setInput again as handleChange have been called multiple times?

[jugal]

Love your content ❣️. Please make more videos on other features of React 18 too.

[mdridoy-efpw]

when someone types 5 letters, the startTransition code block also fires 5 times.
It would be nice if they added option to only fire the startTransition code block for the last input.
just like how a debounce function works.

[FilipCodes]

Thats all nice and fun until state changes do not depend on each other

[rvft]

I literally opened YouTube to see if WDS posted a video and he did lol

[syedalimehdi-english]

Thing is,
Naming convention is very bad
Also we could solve it by debounce

[tomino]

You're an absolute legend. Thanks for a nice and clear explanation.

[jeffjia]

react 18.2.0, isPending not working, always false

[pcr]

Sir, I don't know whether you'll read My comments, But THANKS ALOTTTT ❤️.
I Got My developer job mostly because of your tutorials. And I'm so grateful for this sir. God bless you. I wish I could meet you in real and thank you ❤️...
Really thank you for making web development simple 🥰 ...
I'm a commerce graduate and taught myself coding .. and mostly your tutorials is where I refer to .. and the project I did to land my job wouldn't have been possible without your help..
Again THANKS ALOT ❤️🙏

[mahmoudzakria]

Man, I thought it was for making CSS transitions like fade-in/out a Modal component or something 😅

[malekessam]

so, in this code example the useTransition hook is used to prevent the loading state of the suspense fallback as the goal is keeping the original UI as it is until the lazy loaded component finishes loading. The problem is that I do not understand how this code achieves that goal. The use transition will try to delay the setAdmin as much as possible but the lazy loading will not start until the admin state is true as it will be triggered by the conditional rendering. So, from what i understand this shouldn't do anything and the loading state should occur normally but thats not correct and I do not know why.