React 18 useDeferredValue Hook Crash Course

[@xor_r0]

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!

[@pouriakalantari]

he is the best instructor and mentor in KZbin

[@minhluudinh5522]

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.

[@memeyardthoughts1197]

Here’s another handy custom hook you can create named useActive hook to detect user activity in the browser. It’s pretty useful. Link- kzbin.info/www/bejne/n5PGdIyCa7CZZ5Y

[@konar7466]

Awesome! Thx again Kyle :)

[@grumd0]

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.

[@nazardzys7514]

thanks for the awesome and straightforward explanation bro

[@adimaralimuddin96]

kyle always explains in best as possible. thanks once again!

[@Meerasingh0704]

Hair tutorial on 1m subs pls :)

[@carberi50]

That would be great.

[@mridulsetia4974]

++ lol

[@Handle3649]

This would be nice lol

[@cthulhu7397]

kzbin.infoEHod_nIuz9c

[@yashpatel7291]

thank you so much for Free Hook Crash Course.

[@exoticcoder5365]

The Example on 6:34 is so clear ! Thank you !

[@karthiksuryadevara2546]

Nice explanation, so the value we pass to useDeferredValue should always be something we get from usealState ?

[@rxrx7565]

The guitar is cool, you should make an intro. Nice tutorial!

[@TusharBorawake]

Hi Kyle, can we use this alternative for denouncing or throttling? It looks same as useTransition hook because it also priorities task.

[@CrAzZyKiLleR01]

Kyle is not interested in responding to the community

[@imanuelpundoko6831]

It just like debouncing, there is useDebounce create by community.

[@Alessandro-nq3tm]

Which is the difference between this and useTransition? Seems the same thing to me

[@RichardWagenknecht]

useTransition wraps a block of code updating state. useDeferreredValue wraps a single value.

[@flowerofash4439]

@@RichardWagenknecht any common occurrence example of when usetransition is needed?

[@valen8560]

useSyncExternalStore next plz ❤

[@justsoonenough]

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!

[@mikoajkaleta6856]

How much time does this hook wait since the last input change to perform updating list? Can I change this time?

[@vibhash1994]

Brilliant explanation

[@carberi50]

Great explanation as always. Thanks for the video.

[@EvertJunior]

amazing! Thank you

[@muhammedirtaza4986]

I just feel stupid that I have been watching so many of your videos and just subscribed. You are a great teacher.

[@MohiyuddinShaikh]

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.

[@kelvinpraises]

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.

[@abdfadee8267]

Thank You

[@zohaibkhan5270]

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

[@VarunJain15]

can we achieve similar results with useTransition hook?

[@RubberDuckCoding]

VERY NICE!

[@vladserhiychuk8925]

good job. Thx

[@mukulr5171]

Awesome!

[@MuhammadAhmedAshraf]

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 ???

[@yadneshkhode3091]

awesome mate

[@EvolutionMachinetoMan]

I watched this and useTransition and couldnt find difference between two. Plz mention the difference between UseDiffered and UseTransition. Thank you

[@dhineshkumar8125]

nice explanation kyle.....crystal clear!!

[@Orenrs]

Is this hook good for API calls as well? For example taking an input and run a search query

[@abhishekavr1848]

yes, it will work well, but we can always switch to useDebounce if number of network call is a problem

[@benyamineslami573]

amazing

[@alexdin1565]

please can you add videos about Django channels + celery + Redis bcz you are the best can we understand everything with you

[@sviatoslav8776]

Very clear explanation. Thank you very much.

[@Vptechvelly]

VERY WELL EXPLAINED ..THANK YOU!

[@karthikm.1804]

Please bring more intermediate javascript projects

[@kaziupir]

useImperativeHandle next?

[@ilkrsrc081]

the question is how much time does react wait? is it some arbitrary time that is implemented to React?

[@voidedname]

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

[@watervv]

Hey, Kyle, my girlfriend says you would look more attractive if you did your hair differently. Also, she says she likes people named Kyle.

[@GameOfflineIsLove]

This hooks , i haven't known when to use it , if i type very fast , the UI is still lag

[@sharklion3]

Great video, thank you!

[@muratasarslan2359]

Very clear, thank you

[@RD-ld2bz]

I watch your videos everday and i haven't recognized that video before and today i fail interview because of useDefferedValue 😢

[@fadfooood]

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.

[@2ezpz2plzme]

For IO-intensive tasks, I think it's best to keep it behind a debounce/throttle. `useDeferredValue` is more for CPU-intensive tasks.

[@crazycat2969]

Bro, you have exactly the same guitar as me

[@g_pazzini]

it’s basically a debounce

[@ukaszjonasiak382]

React has just found out about debounce. They are moving forward.

[@Schlumpfpirat]

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~

[@codesymphony]

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);

[@drone_baaba]

You are just awesome bro 👍 please create one udemy course on React

[@Cryptomeyr]

Leran by doing

[@juguetestoys1137]

Great content as always. But can you speak more slowly, please.

[@StellarWeb008]

It is used for almost the same thing as useTransition

[@CrAzZyKiLleR01]

As 4 years React Dev needs to say, React getting complicater and complicater. Will probably switch to Vue or Svelte

[@butterfly7562]

vue3!

[@turolretar]

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.

[@michalkotlicki4710]

@@turolretar Can you give the link to the explanation?

[@lucaspham5238]

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

[@sofianikiforova7790]

SolidJS

[@Digitalgems9000]

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

[@muneebkarim3738]

First heart

[@feynthefallen]

Your "free" course isn't free if you ask me to pay by providing my data and accept marketing emails from you.

[@cyril7104]

People still cant use usecallback and usememo properly, now they will try to usedefferedvalue.....

[@SagarKumar-db2xy]

True lol

[@Cryptomeyr]

You are just awesome bro 👍 please create one udemy course on React