Learn React Hooks: useDeferredValue - Simply Explained!

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

[@AlexanderBelov-y8o]

Going to use this all the time for form validation.

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

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

[@cosdensolutions]

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

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

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

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

[@konradmleczko3810]

you are teaching incredibly fine

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

[@OtisHenryChiemezie]

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

[@muneebahmad8772]

Your explanation is outstanding ❤

[@sviatoslav8776]

Very comprehensive, cool)

[@harag9]

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

[@duybachsnguyen1443]

Thank you very much

[@_ahmedaloush1365]

Thank you Bro the explain is amazing

[@farhadkhoshnoodi7954]

thanks was awesome...

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

[@andriishtoiko7688]

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?

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

[@srinivasreddysagi8722]

Seems like, debouncing is implemented

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

[@daydreamer9469]

If it’s still inside a React component I think it will cause infinite loop. Defining it outside the component or using useRef might avoid this issue.

[@sunilanthony17]

It seems similar to debounce.

[@beepmcjeep5527]

"teste" 😂

[@USPSLaura]

How can I use it in real life project 😢

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

[@Granta_Omega]

This makes my testes hurt.

[@chriscardone589]

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

[@cosdensolutions]

I will :)