This! Although refactoring might break a lot now. But it is really bad especially for beginners but also for developers that don't develop React all the time but come back to it for a new need once in a while.
I understood this explanation more than the actual documentation. Lesson learned: it's not always that reading documentation saves you time, sometimes watching videos demystifying documentation is best. 😅
Thank you for this great video! It's so much easier to follow than the official docs, basically the gist is we can give different priorities to different state changes when it comes to updating the UI.
The best programming tutor out there. I'm very careful with words I use to describe people (words like "best", "most awesome" etc), and I rarely ever use them. But...Damn! Kyle, You're the BEST. Thanks for helping me become a much better programmer. Lots of love from Nigeria
Your channel is the best, never met a person, who can explain any difficult topic so easily, that even a non-English speakers can understand every single detail. Thank you very much ...
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 ❤️🙏
What's amazing is that the delay is CPU related, it's synchronous. But when you do that you still manage to update the UI to "loading" before the thread is stuck very easily. Amazing
Had a tough time wrapping my head around this hook. Your video really simplified it a LOT. The key takeaway was that all `set` events are high priority by default, and the `useTransition` marks something as low priority instead.
YOU MAN are a life saver !!! I really enjoy watching your videos even i already have background about what you are talking about , but at the same time you guided me and gave me a lot of solution about some old and new problems ! I appreciate it Bro
One small note, the startTransition method also causes a render because it has to change the status to isPending=true. so in the end it’s 3 renders vs 1.
@@bigti1199 6:50 - startTransition runs asynchronously (i'm talking about updating the state). It doesn't matter in terms of performance because of the amount of resources that useTransition saves makes it all worthwhile. But it does render three times. Here's why: Without startTransition, it will do *synchronously* (although your computer will be really suffering for 3 seconds) one update (setInput() and setList()). With startTransition, it does it three times: - setInput - (setTransition gets delayed) -> sets `isPending` to true. - (setTransition code runs) -> setList - setTransition Ends, and when it ends (because it doesn't know what happens inside of it) sets `isPending` to false. Since this is an asynchronous operation, it cannot change `isPending` to false on the same rerender as `setList(l)`. The last point, which is the one i was referring to, is due to a state being updated inside of startTransition. This is something that Facebook knows, and they have a warning in case they detect multiple re-renders while running the code. "'Otherwise concurrent mode guarantees are off the table.'" Feel free to check the ReactStartTransition.js file of the source code :)
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.
Sound to me the concept is explained wrong. The rendering merging might be correct, but the only reason why this blocks, is that non of the async state change calls will execute until the current function exit. That is the normal eventloop in js. All asynchronous functions will be put in a que that will exectue when the stack is cleared. So the setTransition is just another async function that wont block, but alow the handler function to exit.
Wouldn't that be part of the same batch update ? First SetInput and isPending is included in the first render, then setList and isPending is included in the second render. Though I am not 100% sure on this.
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?
I think it's fairly easy to check. Console log max index of each iteration. If the index same for each iteration (equal to items count) then it's not cancelled.
Yes, it does run every time. If you have, let's say, a search input and want to avoid making a request for every character, then you should implement a Debounce().
Thanks my guy, this looks like it could be useful for me atm, I need to filter through a list of categories as the user types. The list is small atm but could potentially become very large
React 18 updates are useTransition hook that you already saw which is a concurrent mode feature that React team has been working on for years. And another update is useId hook that you can generally use to generate unique ids in your application
But the loop will execute inside handleChange. So the useTranslition will help us just on render the list after input have been rendered (so rendering the input will be more fast because thet list wont render with it)
Hey, great content as always!!! Could you please make a video about Kafka usage with NodeJS. I am really interested on some advanced topics such as manual commit, exact once delivery, concurrency and etc!
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 = 2000000; function handleChange(e: React.ChangeEvent) { setInput(e.target.value); startTransition(() => { const l = []; for (let i = 0; i < LIST_SIZE; i++) { l.push(e.target.value); } setList(l); }); }
Whats the difference here between using useTransition in the handleChange function and having a useEffect which is has this code separately which triggers when the input changes?
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.
React really needs to start naming their hooks better
Yes I was thinking it should be called useLowPriority or useDeferredPriority or useInterruptable
Ikr even the startTransition doesn't make a lot of sense to me. I would've preferred a name like lowPriority or something
I thought transitions were about those ordinary transitions with ease, ease out, ease in out 😂
This! Although refactoring might break a lot now. But it is really bad especially for beginners but also for developers that don't develop React all the time but come back to it for a new need once in a while.
Tell me about it. You could never tell by the hook's name that that is what it does.
I understood this explanation more than the actual documentation. Lesson learned: it's not always that reading documentation saves you time, sometimes watching videos demystifying documentation is best. 😅
this feels like a good use case for debounce as well, thanks for sharing, you made it super clear!
You explain a useTraction in a very simple way 🤯
my favourite hook useTraction
@@codesymphony your comment made me laugh thanks lol
@@Linuslkm lol yeah 😂
Thank you for this great video! It's so much easier to follow than the official docs, basically the gist is we can give different priorities to different state changes when it comes to updating the UI.
The best programming tutor out there.
I'm very careful with words I use to describe people (words like "best", "most awesome" etc), and I rarely ever use them.
But...Damn! Kyle, You're the BEST.
Thanks for helping me become a much better programmer.
Lots of love from Nigeria
I literally opened TH-cam to see if WDS posted a video and he did lol
Your channel is the best, never met a person, who can explain any difficult topic so easily, that even a non-English speakers can understand every single detail. Thank you very much ...
You're an absolute legend. Thanks for a nice and clear explanation.
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 ❤️🙏
You are the best react tutor on youtube
What's amazing is that the delay is CPU related, it's synchronous. But when you do that you still manage to update the UI to "loading" before the thread is stuck very easily. Amazing
Your video are very easy to understand man lot of love from India ❤️
Had a tough time wrapping my head around this hook. Your video really simplified it a LOT. The key takeaway was that all `set` events are high priority by default, and the `useTransition` marks something as low priority instead.
amazing explanation! Subscribed
This hooks is so helpful.. Thanks Kyle... Cheers from Argentina.
This is kind of an async function with a isPending loading flag. Awesome, thanks for the information!
YOU MAN are a life saver !!!
I really enjoy watching your videos even i already have background about what you are talking about , but at the same time you guided me and gave me a lot of solution about some old and new problems !
I appreciate it Bro
Love your content ❣️. Please make more videos on other features of React 18 too.
Totally Loved it. Thank you for such new concepts
Nice and clear explanation, thanks.
It just clicked! Very good explanation!
Thank you for making this amazing video! Easy to follow! Get the idea about "useTransansition" in just 7 mins! 😀
really love this guy, get knowledge explained so clear! thumbs up!👍
One small note, the startTransition method also causes a render because it has to change the status to isPending=true. so in the end it’s 3 renders vs 1.
But only if you use isPending in your JSX, not?
It changes the state of pending but it still does so in the same render it changes the state of the array
So it does all that in 1 render
@@bigti1199 6:50 - startTransition runs asynchronously (i'm talking about updating the state). It doesn't matter in terms of performance because of the amount of resources that useTransition saves makes it all worthwhile. But it does render three times. Here's why:
Without startTransition, it will do *synchronously* (although your computer will be really suffering for 3 seconds) one update (setInput() and setList()).
With startTransition, it does it three times:
- setInput
- (setTransition gets delayed) -> sets `isPending` to true.
- (setTransition code runs) -> setList
- setTransition Ends, and when it ends (because it doesn't know what happens inside of it) sets `isPending` to false. Since this is an asynchronous operation, it cannot change `isPending` to false on the same rerender as `setList(l)`.
The last point, which is the one i was referring to, is due to a state being updated inside of startTransition. This is something that Facebook knows, and they have a warning in case they detect multiple re-renders while running the code. "'Otherwise concurrent mode guarantees are off the table.'"
Feel free to check the ReactStartTransition.js file of the source code :)
Love u man❤
Thanks
Thank you so much for the support!
This hook is a life changer. Thanks bro..
CONGRATULATIONS! 🎉
so basically it's like web workers who working at background thread
This was an excellent overview. Thanks!
Damn, didn't even know you could use this in React! That's amazing!
Love your content! Thanks man keep up the good work
Thanks Kyle, very informative ! Really good hook
Nice! I didn't know about this one.
Very clear, thank you Kyle👍
Absolutely simple and clear THANKS
Really nice explanation, thank you!
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.
usedeferredvalue is also a new hook which can solve that problem
You could probably set it back with a useEffect hook using a setTimeout that waits for the user to stop typing in order to actually set the new state
better use timeout, with 0.5 sec after input.
if user types again before 0.5sec, reset the timeout.
Cure for INP, nice hook and thanks for sharing.
Thank You , for sharing the knowledge
Very easy to understand. Thank you.
cool, will let me stop adding lodash to my projects only to use their debounce function hahaha
great explanation. Thanks a lot
Awesome explanation!
Sound to me the concept is explained wrong. The rendering merging might be correct, but the only reason why this blocks, is that non of the async state change calls will execute until the current function exit. That is the normal eventloop in js. All asynchronous functions will be put in a que that will exectue when the stack is cleared. So the setTransition is just another async function that wont block, but alow the handler function to exit.
7:00 isn’t it 3 separate renders: setInput, isPending change, setList?
Wouldn't that be part of the same batch update ? First SetInput and isPending is included in the first render, then setList and isPending is included in the second render. Though I am not 100% sure on this.
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?
I think it's fairly easy to check. Console log max index of each iteration. If the index same for each iteration (equal to items count) then it's not cancelled.
That's the debounce functionality. You have to do implement that yourself.
Yes, it does run every time. If you have, let's say, a search input and want to avoid making a request for every character, then you should implement a Debounce().
Yes. However, if you’re using lodash, there’s a useDebounce hook included that can alleviate this issue. If not, implementing it isn’t hard:
function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(
() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
},
[value, delay]
);
return debouncedValue;
};
Thanks men, you're great
Amazing mate, thanks!
Thanks for the video!
Great tutorial !! THANKS!
Thanks for the clear explanation!! :-)
Super condensed: setList(Array(LIST_SIZE).fill(e.target.value)
Man.. This makes me appreciate Svelte so much
How is this handled in Svelte?
^
I mean I did this in svelte and it was sluggish so what are you talking about?
let val = "";
let list = [];
const LIST_SIZE = 20000;
const updateList = (val) => {
list = []
for (let i = 0; i < LIST_SIZE; i++) {
list = [...list, val]
}
}
$: updateList(val)
{#each list as item, idx (idx)}
{item}
{/each}
Update: Added debouncing and works much better:
let val = "";
let list = [];
const LIST_SIZE = 20000;
const debounce = (func, time = 1000) => {
let timeoutId = null;
return (...args) => {
if (timeoutId) {
console.log(`Cleared timeout with id: ${timeoutId}`)
clearTimeout(timeoutId);
}
timeoutId = setTimeout(() => {
console.log(`Called timeout callback with id: ${timeoutId}`)
func(...args)
}, time)
}
}
const updateList = debounce((val) => {
list = []
if (!val) return;
for (let i = 0; i < LIST_SIZE; i++) {
list = [...list, val]
}
});
$: updateList(val)
{#each list as item, idx (idx)}
{item}
{/each}
Thanks my guy, this looks like it could be useful for me atm, I need to filter through a list of categories as the user types. The list is small atm but could potentially become very large
Thank you Kyle for helping me grow in development, please can you make a video on how to automatically delete documents in mongodb
Best explanation !!
Anyone know how he quick moved all the below lines into the arrow func inside startTransition @ 4:22?
Can you review all of the hooks and react18 updates?
React 18 updates are useTransition hook that you already saw which is a concurrent mode feature that React team has been working on for years. And another update is useId hook that you can generally use to generate unique ids in your application
Amazing video, thanks.
Very useful and well explained
Awesome explanation.
Thanks! Nice explanation 🔥
Dude you are awesome!
But the loop will execute inside handleChange. So the useTranslition will help us just on render the list after input have been rendered (so rendering the input will be more fast because thet list wont render with it)
Great content, thank you sir.
that's great usefull.
where is useId and another hooks.
How do you do that line swapping at 4:23?
Lol this is the exact answer my app's issue looking for
Congratulations 😉
Hey, great content as always!!! Could you please make a video about Kafka usage with NodeJS. I am really interested on some advanced topics such as manual commit, exact once delivery, concurrency and etc!
what is the execution order in case of async function?
before useTransition, i used debounce to make similar functionality working.
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 = 2000000;
function handleChange(e: React.ChangeEvent) {
setInput(e.target.value);
startTransition(() => {
const l = [];
for (let i = 0; i < LIST_SIZE; i++) {
l.push(e.target.value);
}
setList(l);
});
}
just use another useState and make it a priority!
i like it
Beautiful!
could you record a video to talk about nextjs?
Good video as always, man! Thank you!!! But what's the difference between useTransition and useDebounce?
same question, since both of these will be used on maybe the same use cases
i feel isPending should've been the second value. Because you wont always need it, which will cause an 'unused variable' error with typescript
Whats the difference here between using useTransition in the handleChange function and having a useEffect which is has this code separately which triggers when the input changes?
This always being called threshold thru ages.
thank you
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.
so... a good use case could be a search input with fetch API?
Thats all nice and fun until state changes do not depend on each other
Great video
useDeferredValue() also sets to lower priority.
Very Useful
Thank you for the insights. Any ideas on how to use this in Next js?
It'd be good to update this video since React 19 brought some relevant changes to this hook.
Great.
btw why don't you join the copilot waitlist?
Kyle is great 👍🏻
Can it do one more better if I would like to stop a running transition?
It's possible to use useTransition for fetching api data? Could you give me example what purpose of useTransition is?
Nice content
Thank you!
In your example we can use flushSync !!
ı cannot find any redux tutorial video on your channel. do u have a plan about any redux videos?
Ni noma... respect