React 18 useDeferredValue Hook Crash Course

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:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:40 - Why you need useDeferredValue
01:59 - How useDeferredValue works
02:45 - How to implement useDeferredValue

#useDeferredValue #WDS #React

[xor_r]

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 YouTube

[minhluudinh]

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.

[grumd]

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.

[rxrx]

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

[nazardzys]

thanks for the awesome and straightforward explanation bro

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

[karthiksuryadevara]

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

[adimaralimuddin]

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

[yashpatel]

thank you so much for Free Hook Crash Course.

[imanuelpundoko]

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.

[exoticcoder]

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

[alexdin]

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

[memeyardthoughts]

Here’s another handy custom hook you can create named useActive hook to detect user activity in the browser. It’s pretty useful.

[Alessandro-nqtm]

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

[karthikm.]

Please bring more intermediate javascript projects

[carberi]

Great explanation as always. Thanks for the video.

[mikoajkaleta]

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

[RD-ldbz]

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