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.

[@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.

[@Meerasingh0704]

Hair tutorial on 1m subs pls :)

[@carberi50]

That would be great.

[@mridulsetia4974]

++ lol

[@Handle3649]

This would be nice lol

[@cthulhu7397]

kzbin.infoEHod_nIuz9c

[@nazardzys7514]

thanks for the awesome and straightforward explanation bro

[@rxrx7565]

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

[@konar7466]

Awesome! Thx again Kyle :)

[@karthiksuryadevara2546]

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

[@yashpatel7291]

thank you so much for Free Hook Crash Course.

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

[@mikoajkaleta6856]

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

[@adimaralimuddin96]

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

[@imanuelpundoko6831]

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

[@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

[@exoticcoder5365]

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

[@valen8560]

useSyncExternalStore next plz ❤

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

[@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!

[@VarunJain15]

can we achieve similar results with useTransition hook?

[@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

[@carberi50]

Great explanation as always. Thanks for the video.

[@EvertJunior]

amazing! Thank you

[@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

[@alexdin1565]

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

[@vladserhiychuk8925]

good job. Thx

[@RubberDuckCoding]

VERY NICE!

[@RD-ld2bz]

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

[@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.

[@karthikm.1804]

Please bring more intermediate javascript projects

[@yadneshkhode3091]

awesome mate

[@abdfadee8267]

Thank You

[@mukulr5171]

Awesome!

[@GameOfflineIsLove]

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

[@dhineshkumar8125]

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

[@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.

[@sharklion3]

Great video, thank you!

[@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

[@benyamineslami573]

amazing

[@crazycat2969]

Bro, you have exactly the same guitar as me

[@EvolutionMachinetoMan]

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

[@muratasarslan2359]

Very clear, thank you

[@kaziupir]

useImperativeHandle next?

[@sviatoslav8776]

Very clear explanation. Thank you very much.

[@Vptechvelly]

VERY WELL EXPLAINED ..THANK YOU!

[@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.

[@ukaszjonasiak382]

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

[@g_pazzini]

it’s basically a debounce

[@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

[@Pune_Flats]

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

[@juguetestoys1137]

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

[@StellarWeb008]

It is used for almost the same thing as useTransition

[@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

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

[@Cryptomeyr]

Leran by doing

[@muneebkarim3738]

First heart

[@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

[@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