Learn React Hooks: useDeferredValue - Simply Explained!

Join The Discord! → discord.cosdensolutions.io
Source Code → github.com/cosdensolutions/co...
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!

[@cosdensolutions]

Hey everyone! I just launched 🚀 Project React, which is a course that teaches you React by building a real-world project. It goes way beyond what you see in these videos and walks you through step-by-step on how to build a big and complex application with React! You can check it out here: cosden.solutions/project-react

[@abeercodes]

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

[@aneurysmjs]

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

[@Arunmurali12]

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

[@cosdensolutions]

glad to hear it!

[@muneebahmad8772]

Your explanation is outstanding ❤

[@OtisHenryChiemezie]

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

[@harag9]

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

[@user-ru8hn9hb5c]

Going to use this all the time for form validation.

[@Thassalocracy]

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.

[@cosdensolutions]

Yes absolutely! All of these 3 hooks are very similar and have many things in common

[@_ahmedaloush1365]

Thank you Bro the explain is amazing

[@petar567]

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.💯

[@cosdensolutions]

yes, but in the future! still doing beginner stuff for now :D

[@konradmleczko3810]

you are teaching incredibly fine

[@cabrelelvis9442]

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

[@cosdensolutions]

debounce is better for api requests, because it is time based. This hook will fire a lot of requests on fast computers (macbooks for example)

[@mladenorsolic370]

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!

[@cosdensolutions]

they are for different use cases! The timer is great when you want to prevent network requests for example

[@mladenorsolic370]

@@cosdensolutions but i would still use this one instead of debounce, because you can never know how long is the network request gonna take, i used debounce to infinetly load additional 15 items each time making a request to server and in most cases .3 sec was enough but if that request takes longer then whole thing breaks with spinner never disappearing. Using this hook that problem is simply gone

[@aissasemaoui6354]

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

[@cosdensolutions]

yeah useRef can be used with objects for sure!

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

[@belkocik]

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

[@beepmcjeep5527]

I believe useDeferredValue makes actual use of requestAnimationFrame or React's internal renderer scheduling. I'm guessing debounce is a naive (although probably equally effective) implementation utilizing a delay.

[@austinstewart1451]

Use-debounce also gives more control since you can pass the time argument. useDeferredValue will simply schedule the task to run separate from the primary state but you don't control the delay. use-debounce would be good for expensive server hits or areas that have heavy calculations and don't need to be rendered immediately so you can set it to a higher delay like 5 seconds.

[@sunilanthony17]

It seems similar to debounce.

[@beepmcjeep5527]

"teste" 😂

[@shahabgohar3350]

it is kind of a debounce-ish

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

[@chriscardone589]

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

[@cosdensolutions]

I will :)