Тёмный

React v18 Hooks - useTransition vs useDeferredValue Examples & Comparison 

Dave Gray
Подписаться 342 тыс.
Просмотров 11 тыс.
50% 1

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

 

29 сен 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 49   
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
React 18 includes the new hooks useTransition and useDeferredValue. Both of these hooks are based on concurrency. They can be useful, but they shouldn't be used all of the time. We'll look at both how to use and when to use these new hooks. If you are new to React, I recommend starting with my React JS for Beginners full course here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-RVFAyFWO4go.html
@Jorgeee
@Jorgeee 2 года назад
Been lurking on your channel for a couple of hours. I'm very impressed by the amount of content and quality produced. Looking forward to the Discord server!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
Welcome aboard! And thank you for the kind words! 🙏
@KochharAmandeep
@KochharAmandeep 2 года назад
Hi Dave, can i get the name of your vs code theme?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
Sure! Github theme - several dark mode options in it.
@kishoreandra
@kishoreandra 2 года назад
Thanks for the video Dave ... Would love to see a series wherein - How to do things in React + - general scenarios / use cases - filter / sort - pagination - infinite scrolling - search functionality ( debounce technique) - lazy loading stuff - file upload - validations using form Many more .... I have gone through the login authentication series ... My goodness 😍 huge respect Dave 🙏💯 -
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
Great suggestion! I like this list and I will work to fit these topics in! 💯🙏
@kishoreandra
@kishoreandra 2 года назад
@@DaveGrayTeachesCode Amazing Dave, Thank you 😍 ... Intention is most of the jobs have similar functionalities to implement more or less, you know better than me 😄 ...
@安全保密
@安全保密 Год назад
I feel that the difference between them is similar to useMemo and useCallback, only the application scenario is different, and they can be used together technically but not reasonable.
@learn029
@learn029 2 года назад
I can't able to install create react app with yarn which step of command i have to follow
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
Keval, follow the instructions shown here: reactjs.org/docs/create-a-new-react-app.html
@dharmeshgohil9375
@dharmeshgohil9375 2 года назад
One word awesome
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
Thank you, Dharmesh! 🙏
@abdulazeez.98
@abdulazeez.98 Год назад
Awesome. The best video I saw regarding this topic
@SkyrimBeast
@SkyrimBeast 2 года назад
The useTransition hook strikes me as a way to manipulate the DOM after it's fully rendered. Thanks for these video's Dave, I've been watching your content for several months now.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
Glad it was helpful!
@antonarbus
@antonarbus Год назад
Do we really need the "startTransition" function inside "useEffect" in practical example? useEffect already depends on "deferredInput", which itself tells the react to execute its callback with lower priority. A bit confused between these two hooks, looks like they duplicate each other. Devs, please explain.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
Just one example. I suggest playing around with it and experimenting to best learn how it works. It's new. More examples will surely come too.
@安全保密
@安全保密 Год назад
useMemo is a good way to achieve the same goal
@muhammadharoon8264
@muhammadharoon8264 2 года назад
Best channel i ever seen on RU-vid. Dave makes so simple to understand. Keep it up dude
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
Thank you for the kind words, Muhammad! 🙏💯
@eugenepranoto3824
@eugenepranoto3824 2 года назад
So how to fix the backspace search problem?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
The fewer characters, the more records this example has to filter through. This is true both typing forwards and when removing characters.
@eugenepranoto3824
@eugenepranoto3824 2 года назад
@@DaveGrayTeachesCode I mean like when u r typing forward quickly. Its only show the final text such as "222", but when u r removing character its show every text from " 22" "2" "" -> the final text How to make the console log only show the final text for backward typing?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
@@eugenepranoto3824 it is due to not having as many records to filter when you have typed more characters. Therefore, going backwards, it gets the results faster to slower. When you start with no characters typed, it is slower to faster so you are able to type more before the app responds.
@ahmad-murery
@ahmad-murery 2 года назад
Nice video, Thanks Dave, you always come to the rescue. Now I think I need to re-evaluate my react-abilities 🤔😎
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
Thank you, Ahmad. 🙏 I have no doubt that your programming abilities are excellent my friend 💯
@ahmad-murery
@ahmad-murery 2 года назад
@@DaveGrayTeachesCode Sometimes my 2.5 brain cells stop and need a kick to start again, especially when so many things pull you back and lower your motivations. Thanks to you my friend👍
@xandrsurf2234
@xandrsurf2234 2 года назад
Thank you, Dave) Very clearly explained
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
You're welcome, Xandr! 💯
@StanleySathler
@StanleySathler 2 года назад
You're awesome, Dave! Thanks!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
You're welcome, Stanley! 🙏
@ambrosebeavers
@ambrosebeavers Год назад
Wonderful!
@DaveGrayTeachesCode
@DaveGrayTeachesCode Год назад
Thank you!
@hungnguyencanh5089
@hungnguyencanh5089 2 года назад
Greate content and very clearly. I hope in the near future there will be a video on how to make a real project. Thank you so much!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
Thank you! 🙏 Yes, MERN project coming soon - after a short vacation 🌴
@hungnguyencanh5089
@hungnguyencanh5089 2 года назад
@@DaveGrayTeachesCode Nice :D Waiting for this 🤩☺️
@michaelvigato3228
@michaelvigato3228 2 года назад
I wonder if these can be somehow used to debounce API calls / to implement a simpler version of a useDebouce hook
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
Absolutely. That is essentially what I am doing in Example 2 in this video except I use it to debounce a search filter instead of an API request.
@michaelvigato3228
@michaelvigato3228 2 года назад
@@DaveGrayTeachesCode but if that was an actual API request, wouldn’t it still hit the endpoint N times if the user input N characters ?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
@@michaelvigato3228 yes, it would. An actual debounce gives you more control, but this is similar in some ways.
@owenlilly3634
@owenlilly3634 2 года назад
What's the name of your VSCode theme?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
Github theme 🚀
@owenlilly3634
@owenlilly3634 2 года назад
@@DaveGrayTeachesCode awesome, thanks!
@sonamohialdin3376
@sonamohialdin3376 2 года назад
So good tutorial
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
Thank you, Sona! 💯
@sonamohialdin3376
@sonamohialdin3376 2 года назад
@@DaveGrayTeachesCode You are welcome
@dardanillyr3989
@dardanillyr3989 2 года назад
Can i Ask u for help on a react game? U have discord so i Can explain the question detailed?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 года назад
I am launching a Discord near the end of this month (June 2022). I hope to build a community that is helpful. I do not have the extra time to help with viewer's projects on my own.
Далее
What is React.memo - It's not useMemo
15:29
Просмотров 9 тыс.
Офицер, я всё объясню
01:00
Просмотров 4,1 млн
КОТЯТА В ОПАСНОСТИ?#cat
00:36
Просмотров 1,4 млн
React 18 useTransition Hook Crash Course
7:50
Просмотров 152 тыс.
State Managers Are Making Your Code Worse In React
13:33
НОВЫЙ REACT 18 ВЫШЕЛ
20:55
Просмотров 108 тыс.
3 React Mistakes, 1 App Killer
14:00
Просмотров 115 тыс.
useTransition() vs useDeferredValue | React 18
16:22
Просмотров 95 тыс.
Офицер, я всё объясню
01:00
Просмотров 4,1 млн