Another great video. Now I can update version of React in my projects and upgrade the Search field in my table component. So far I used only AbortController in my service for a debounce in fetching data, but now, combining with this hook it has to be much better. Thank you!
The problem with useDeferredValue is that the expensive loop will still have to run in the main thread at some point. And if coincidentally your user starts typing again while the thread is busy, they'll experience the same lag. Different users type with different speed and that's why useDeferredValue in my experience is not always perfect. In some cases using WebWorkers will be plain better. You can just make a separate thread do the job and return the results. You can't always just replace useDeferredValue with WebWorkers ofc, it's just nice to know about the disadvanages and alternatives.
Just subscribed a minute ago while I have been watching his videos for about 2 years. I guess because his CTA is at the beginning where audience is more interested in watching the video than subscribing.
This literately just happened to me too, I've been watching since 2020 and just realized I wasn't subscribed while watching the useTransition video some minutes ago, subbed anyways.
React doesn't wait any specified time and this should not be confused with debounce at all, it just updates the value as soon as no "urgent" render is pending (caused by events like setState etc), which could be immediately after the user input (if the input causes no urgent renders), or never, if there is always an urgent render pending (some sort of animation). There is no correlation to user input / specific event frequency. A debounce is scoped to a specific event chain, and its result is urgent (just delayed until the event chain has a sufficiently long break). TLDR: Deferred value waits for urgent renders to stop, Debounce waits for specified events to stop (like typing a query). "Are we waiting for something specific to stop" => Debounce. "Doesn't matter, just render it at some point in time" => Deferred
Can we only use this hook in debouncing or it have some other use cases I think we can because useDeferred depends upon whether a value is changing or not if not then it changes the defered value so maybe we can use it in some other cases but please correct me if i am wrong
how do you use google fonts i use it in css by using import i watched it from web design course i watched kevin doing it in html head which one is better ???
Here’s another handy custom hook you can create named useActive hook to detect user activity in the browser. It’s pretty useful. Link- th-cam.com/video/ibcCYL6Kf14/w-d-xo.html
I just replaced it with some use-debounce I used in a project with the same scenario - search input - but I still don't like how quick useDeferredValue changes. I ended up with more unnecessary API calls and flickers. But as always, top notch video Kyle.
Hey Kyle, this is unrelated to the video but figured this would be the best way to reach you- I've seen your videos and they're absolutely fantastic. However I've been struggling with tables and keeping cells the right size. It seems like I always have table-layout: fixed; to get the desired results - but I then have to pixel nudge and it's just horrible. Specifically when a certain column only has ~3 characters, I cannot seem to signal that column shouldn't be ~50% of the table, but as small as possible. Or use ellipsis for a long text that would otherwise cause a line-break and therefore a multi-line cell. It would be great if you could to a video about that. Keep up the good work and Best from Germany~
don't use tables. use flex with flex-grow 1, and basis 0, or try flex-grow 0. can also try a grid. use word-break: nowrap; to prevent word breaking. can also try using a clamped width/height using calc. ie. width: calc(1.8rem + 3vw);
I'm good with React keeps chaning to improve its performance, but I'm sick with how JS in general keeps breeding new lib, framework, tool, test...blah blah blah, all shitt* stuffs that employers keep asking me to have when I can do the same with older lib/framework
or.. simply store those values in the cache and populate what the user is typing that matches. or, if it's 20,000 dynamic, simply run some behind the scenes ajax to populate the search dropdown toolip. you don't need to add a huge bloated library to accomplish this, wtf lmao
he is the best instructor and mentor in TH-cam
Another great video. Now I can update version of React in my projects and upgrade the Search field in my table component. So far I used only AbortController in my service for a debounce in fetching data, but now, combining with this hook it has to be much better.
Thank you!
You are amazing. I have watched a bunch of videos and read articles about the new hooks but this is by far the best explanation.
The problem with useDeferredValue is that the expensive loop will still have to run in the main thread at some point. And if coincidentally your user starts typing again while the thread is busy, they'll experience the same lag. Different users type with different speed and that's why useDeferredValue in my experience is not always perfect.
In some cases using WebWorkers will be plain better. You can just make a separate thread do the job and return the results.
You can't always just replace useDeferredValue with WebWorkers ofc, it's just nice to know about the disadvanages and alternatives.
The Example on 6:34 is so clear ! Thank you !
Hair tutorial on 1m subs pls :)
That would be great.
++ lol
This would be nice lol
th-cam.com/users/shortsEHod_nIuz9c
Awesome! Thx again Kyle :)
thanks for the awesome and straightforward explanation bro
kyle always explains in best as possible. thanks once again!
thank you so much for Free Hook Crash Course.
The guitar is cool, you should make an intro. Nice tutorial!
Brilliant explanation
Nice explanation, so the value we pass to useDeferredValue should always be something we get from usealState ?
amazing! Thank you
Which is the difference between this and useTransition? Seems the same thing to me
useTransition wraps a block of code updating state. useDeferreredValue wraps a single value.
@@RichardWagenknecht any common occurrence example of when usetransition is needed?
Thank You
useSyncExternalStore next plz ❤
Hi Kyle, can we use this alternative for denouncing or throttling? It looks same as useTransition hook because it also priorities task.
Kyle is not interested in responding to the community
It just like debouncing, there is useDebounce create by community.
VERY NICE!
good job. Thx
Awesome!
Great explanation as always. Thanks for the video.
awesome mate
Hey! Can you make a video about how you create a Chrome Extension, I think it would be helpful cause it uses many different elements of code!
amazing
can we achieve similar results with useTransition hook?
How much time does this hook wait since the last input change to perform updating list? Can I change this time?
I just feel stupid that I have been watching so many of your videos and just subscribed. You are a great teacher.
Just subscribed a minute ago while I have been watching his videos for about 2 years. I guess because his CTA is at the beginning where audience is more interested in watching the video than subscribing.
This literately just happened to me too, I've been watching since 2020 and just realized I wasn't subscribed while watching the useTransition video some minutes ago, subbed anyways.
nice explanation kyle.....crystal clear!!
the question is how much time does react wait? is it some arbitrary time that is implemented to React?
React doesn't wait any specified time and this should not be confused with debounce at all, it just updates the value as soon as no "urgent" render is pending (caused by events like setState etc), which could be immediately after the user input (if the input causes no urgent renders), or never, if there is always an urgent render pending (some sort of animation). There is no correlation to user input / specific event frequency. A debounce is scoped to a specific event chain, and its result is urgent (just delayed until the event chain has a sufficiently long break).
TLDR: Deferred value waits for urgent renders to stop, Debounce waits for specified events to stop (like typing a query).
"Are we waiting for something specific to stop" => Debounce.
"Doesn't matter, just render it at some point in time" => Deferred
Great video, thank you!
Very clear, thank you
please can you add videos about Django channels + celery + Redis bcz you are the best can we understand everything with you
Can we only use this hook in debouncing or it have some other use cases
I think we can because useDeferred depends upon whether a value is changing or not if not then it changes the defered value so maybe we can use it in some other cases but please correct me if i am wrong
how do you use google fonts i use it in css by using import i watched it from web design course i watched kevin doing it in html head which one is better ???
Is this hook good for API calls as well? For example taking an input and run a search query
yes, it will work well, but we can always switch to useDebounce if number of network call is a problem
I watched this and useTransition and couldnt find difference between two. Plz mention the difference between UseDiffered and UseTransition. Thank you
Very clear explanation. Thank you very much.
VERY WELL EXPLAINED ..THANK YOU!
Here’s another handy custom hook you can create named useActive hook to detect user activity in the browser. It’s pretty useful.
Link- th-cam.com/video/ibcCYL6Kf14/w-d-xo.html
Please bring more intermediate javascript projects
I watch your videos everday and i haven't recognized that video before and today i fail interview because of useDefferedValue 😢
useImperativeHandle next?
This hooks , i haven't known when to use it , if i type very fast , the UI is still lag
I just replaced it with some use-debounce I used in a project with the same scenario - search input - but I still don't like how quick useDeferredValue changes. I ended up with more unnecessary API calls and flickers. But as always, top notch video Kyle.
For IO-intensive tasks, I think it's best to keep it behind a debounce/throttle. `useDeferredValue` is more for CPU-intensive tasks.
Bro, you have exactly the same guitar as me
it’s basically a debounce
You are just awesome bro 👍 please create one udemy course on React
Hey, Kyle, my girlfriend says you would look more attractive if you did your hair differently. Also, she says she likes people named Kyle.
React has just found out about debounce. They are moving forward.
Hey Kyle, this is unrelated to the video but figured this would be the best way to reach you-
I've seen your videos and they're absolutely fantastic. However I've been struggling with tables and keeping cells the right size. It seems like I always have table-layout: fixed; to get the desired results - but I then have to pixel nudge and it's just horrible.
Specifically when a certain column only has ~3 characters, I cannot seem to signal that column shouldn't be ~50% of the table, but as small as possible. Or use ellipsis for a long text that would otherwise cause a line-break and therefore a multi-line cell.
It would be great if you could to a video about that. Keep up the good work and
Best from Germany~
don't use tables. use flex with flex-grow 1, and basis 0, or try flex-grow 0. can also try a grid.
use word-break: nowrap; to prevent word breaking.
can also try using a clamped width/height using calc. ie. width: calc(1.8rem + 3vw);
Great content as always. But can you speak more slowly, please.
It is used for almost the same thing as useTransition
Leran by doing
First heart
As 4 years React Dev needs to say, React getting complicater and complicater. Will probably switch to Vue or Svelte
vue3!
React is still better in every way and I have a good explanation on why that is. Unfortunately, this comment section is far too small to contain it.
@@turolretar Can you give the link to the explanation?
I'm good with React keeps chaning to improve its performance, but I'm sick with how JS in general keeps breeding new lib, framework, tool, test...blah blah blah, all shitt* stuffs that employers keep asking me to have when I can do the same with older lib/framework
SolidJS
or.. simply store those values in the cache and populate what the user is typing that matches. or, if it's 20,000 dynamic, simply run some behind the scenes ajax to populate the search dropdown toolip. you don't need to add a huge bloated library to accomplish this, wtf lmao
Your "free" course isn't free if you ask me to pay by providing my data and accept marketing emails from you.
People still cant use usecallback and usememo properly, now they will try to usedefferedvalue.....
True lol
You are just awesome bro 👍 please create one udemy course on React