Learn React Hooks: useDeferredValue - Simply Explained!

In this video we will learn about React hooks, starting with useDeferredValue. This powerful React hook will allow you to optimise the performance in your application by deferring some state updates at a later point, prioritising the ones that actually matter. In this video we take a look at some examples where the useDeferredValue React hook makes sense to use, and we see exactly how it should be used!

In this new React world, hooks are here to stay, so it's best to learn them! In this tutorial I demonstrate the useDeferredValue React hook, and I explain it very simply and in a way that is easy to understand. Enjoy!

[abeercodes]

Your explanation is seriously good and very much clean. Thank you

[AlexanderBelov-yo]

Going to use this all the time for form validation.

[aneurysmjs]

usually I don't comment that often but your explanation rocks, nice job :)

[Arunmurali]

Thank you sir, this is the best explanation of the hook I had found on YouTube...

[cabrelelvis]

Very usefull when you have input to query database or some api with params or query you dont want to make request for each letter, before this video I used debounce function

[BeeBeeEight]

Thank u Darius. It's definitely a very good explanation, but I think it's even better to put this together with useTransition since Dan Abramov intended these two to have similar use cases but targeting different codes.

IMHO, we could also create a custom debouncing hook to control the timeout for rendering the result value. If I had to debounce the rendering of search results, such a hook would be then more flexible than useDeferredValue since we can't really control when useDeferredValue will render the result.

[mladenorsolic]

This is a way better/smarter hook then yhe old debounce based one with a timer. I should not worry about the timer, and the play here is : start the render and restart if state changes. I love it! Thank you!

[petar]

Have you considered making videos explaining how the different hooks work under the hood? Also thank you for the great explanation, I will definitely try this hook in my projects.💯

[OtisHenryChiemezie]

This is awesome 👌 I will try this with my search component. 🎉🎉🎉

[harag]

great video, thanks, that use hook will be so useful.

[belkocik]

What is the difference between useDeferredValue and use-debounce library (useDebounce hook) from npm?

[belkocik]

10:36 what you mean? If I pass an array of object to this Demo component and then pass it to useDefferedValue hook it wouldn't cause an infinite loop?

[aissasemaoui]

Thank you Darius, Can we use objects with useRef since it preserve the value between rerenders?

[andriishtoiko]

what if [stateVal, setStateVal] = useState({ hello: world }) -> stateVal is an object but it will not be brand new object on each rerender since it is saved in state - would be ok to pass stateVal into useDefferedValue?

[srinivasreddysagi]

Seems like, debouncing is implemented

[v-korch]

So that's kinda built-in debouncing

[USPSLaura]

How can I use it in real life project 😢

[snatvb]

you forgot say about memo - without this hok you will have same issue
I dislike useDeferredValue 'cause I can't control this debounce effect, and this work like debounce, looks unpredictable and can't be configured, nah

[chriscardone]

Why don't you do full stack projects with all the best practices in React?