Learn React Hooks: useDeferredValue - Simply Explained!

Подписаться 87 тыс.

Просмотров 12 тыс.

50% 1

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!

Опубликовано:

16 сен 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 35

@cosdensolutions 3 месяца назад

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 9 месяцев назад

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

@sviatoslav8776 8 дней назад

Very comprehensive, cool)

@muneebahmad8772 9 месяцев назад

Your explanation is outstanding ❤

@Arunmurali12 9 месяцев назад

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

@cosdensolutions 9 месяцев назад

glad to hear it!

@OtisHenryChiemezie 9 месяцев назад

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

@user-ru8hn9hb5c 8 месяцев назад

Going to use this all the time for form validation.

@aneurysmjs Месяц назад

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

@petar567 9 месяцев назад

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 9 месяцев назад

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

@harag9 8 месяцев назад

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

@cabrelelvis9442 9 месяцев назад

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 9 месяцев назад

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)

@Thassalocracy 9 месяцев назад

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 9 месяцев назад

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

@_ahmedaloush1365 3 месяца назад

Thank you Bro the explain is amazing

@konradmleczko3810 5 месяцев назад

you are teaching incredibly fine

@mladenorsolic370 9 месяцев назад

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 9 месяцев назад

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

@mladenorsolic370 9 месяцев назад

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

@belkocik 9 месяцев назад

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

@beepmcjeep5527 9 месяцев назад

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 9 месяцев назад

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.

@aissasemaoui6354 9 месяцев назад

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

@cosdensolutions 9 месяцев назад

yeah useRef can be used with objects for sure!

@belkocik 4 месяца назад

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?

@beepmcjeep5527 9 месяцев назад

"teste" 😂

@sunilanthony17 6 месяцев назад

It seems similar to debounce.

@USPSLaura 8 дней назад

How can I use it in real life project 😢

@Granta_Omega 6 дней назад

This makes my testes hurt.

@shahabgohar3350 9 месяцев назад

it is kind of a debounce-ish

@snatvb 9 месяцев назад

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