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
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 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
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
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.
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.💯
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.
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.
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?
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
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
Your explanation is seriously good and very much clean. Thank you
usually I don't comment that often but your explanation rocks, nice job :)
Going to use this all the time for form validation.
Thank you sir, this is the best explanation of the hook I had found on UA-cam...
glad to hear it!
This is awesome 👌 I will try this with my search component. 🎉🎉🎉
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!
they are for different use cases! The timer is great when you want to prevent network requests for example
@@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
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
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)
Your explanation is outstanding ❤
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.
Yes absolutely! All of these 3 hooks are very similar and have many things in common
great video, thanks, that use hook will be so useful.
Very comprehensive, cool)
you are teaching incredibly fine
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.💯
yes, but in the future! still doing beginner stuff for now :D
Thank you very much
What is the difference between useDeferredValue and use-debounce library (useDebounce hook) from npm?
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.
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.
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?
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.
Thank you Bro the explain is amazing
I finally get it now
thanks was awesome...
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?
Thank you Darius, Can we use objects with useRef since it preserve the value between rerenders?
yeah useRef can be used with objects for sure!
How can I use it in real life project 😢
Seems like, debouncing is implemented
It seems similar to debounce.
"teste" 😂
Why don't you do full stack projects with all the best practices in React?
I will :)
This makes my testes hurt.
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
it is kind of a debounce-ish