React 18 useDeferredValue Hook Crash Course
Вставка
- Опубліковано 4 сер 2024
- FREE React Hooks Course: courses.webdevsimplified.com/...
React 18 recently had its official non-beta release and with it came multiple new React hooks to help deal with concurrency and rendering slow content. One of those hooks is the useDeferredValue hook which is easy to use but difficult to understand. In this video I will help explain how this hook works so you can understand how and when to best use it.
📚 Materials/References:
FREE React Hooks Course: courses.webdevsimplified.com/...
useDeferredValue Article: blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:40 - Why you need useDeferredValue
01:59 - How useDeferredValue works
02:45 - How to implement useDeferredValue
#useDeferredValue #WDS #React
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.
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!
Awesome! Thx again Kyle :)
thanks for the awesome and straightforward explanation bro
thank you so much for Free Hook Crash Course.
kyle always explains in best as possible. thanks once again!
Brilliant explanation
amazing! Thank you
Hair tutorial on 1m subs pls :)
That would be great.
++ lol
This would be nice lol
ua-cam.com/users/shortsEHod_nIuz9c
Great explanation as always. Thanks for the video.
awesome mate
VERY NICE!
good job. Thx
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.
Awesome!
Thank You
amazing
The guitar is cool, you should make an intro. Nice tutorial!
Great video, thank you!
Very clear, thank you
nice explanation kyle.....crystal clear!!
Very clear explanation. Thank you very much.
VERY WELL EXPLAINED ..THANK YOU!
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!
You are just awesome bro 👍 please create one udemy course on React
please can you add videos about Django channels + celery + Redis bcz you are the best can we understand everything with 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
Nice explanation, so the value we pass to useDeferredValue should always be something we get from usealState ?
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 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.
The Example on 6:34 is so clear ! Thank you !
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 ???
It just like debouncing, there is useDebounce create by community.
Please bring more intermediate javascript projects
can we achieve similar results with useTransition hook?
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?
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.
useImperativeHandle next?
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 watch your videos everday and i haven't recognized that video before and today i fail interview because of useDefferedValue 😢
Bro, you have exactly the same guitar as me
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
I watched this and useTransition and couldnt find difference between two. Plz mention the difference between UseDiffered and UseTransition. Thank you
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);
This hooks , i haven't known when to use it , if i type very fast , the UI is still lag
it’s basically a debounce
React has just found out about debounce. They are moving forward.
It is used for almost the same thing as useTransition
Leran by doing
Here’s another handy custom hook you can create named useActive hook to detect user activity in the browser. It’s pretty useful.
Link- ua-cam.com/video/ibcCYL6Kf14/v-deo.html
Great content as always. But can you speak more slowly, please.
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
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
Hey, Kyle, my girlfriend says you would look more attractive if you did your hair differently. Also, she says she likes people named Kyle.
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