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: ua-cam.com/video/RVFAyFWO4go/v-deo.html
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!
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 Amazing Dave, Thank you 😍 ... Intention is most of the jobs have similar functionalities to implement more or less, you know better than me 😄 ...
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 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👍
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.
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 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?
@@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.
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.
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: ua-cam.com/video/RVFAyFWO4go/v-deo.html
A little progress every day surely does go a long way. Thank you.
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!
Welcome aboard! And thank you for the kind words! 🙏
Best channel i ever seen on UA-cam. Dave makes so simple to understand.
Keep it up dude
Thank you for the kind words, Muhammad! 🙏💯
Awesome. The best video I saw regarding this topic
Shouldn't we use previous value while setting state at 2:33
You're awesome, Dave! Thanks!
You're welcome, Stanley! 🙏
Thank you, Dave) Very clearly explained
You're welcome, Xandr! 💯
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 🙏💯
-
Great suggestion! I like this list and I will work to fit these topics in! 💯🙏
@@DaveGrayTeachesCode Amazing Dave, Thank you 😍 ... Intention is most of the jobs have similar functionalities to implement more or less, you know better than me 😄 ...
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.
Glad it was helpful!
Nice video,
Thanks Dave, you always come to the rescue.
Now I think I need to re-evaluate my react-abilities 🤔😎
Thank you, Ahmad. 🙏 I have no doubt that your programming abilities are excellent my friend 💯
@@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👍
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!
Thank you! 🙏 Yes, MERN project coming soon - after a short vacation 🌴
@@DaveGrayTeachesCode Nice :D Waiting for this 🤩☺️
One word awesome
Thank you, Dharmesh! 🙏
So good tutorial
Thank you, Sona! 💯
@@DaveGrayTeachesCode You are welcome
Wonderful!
Thank you!
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.
Hi Dave, can i get the name of your vs code theme?
Sure! Github theme - several dark mode options in it.
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.
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
I wonder if these can be somehow used to debounce API calls / to implement a simpler version of a useDebouce hook
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.
@@DaveGrayTeachesCode but if that was an actual API request, wouldn’t it still hit the endpoint N times if the user input N characters ?
@@michaelvigato3228 yes, it would. An actual debounce gives you more control, but this is similar in some ways.
I can't able to install create react app with yarn which step of command i have to follow
Keval, follow the instructions shown here: reactjs.org/docs/create-a-new-react-app.html
So how to fix the backspace search problem?
The fewer characters, the more records this example has to filter through. This is true both typing forwards and when removing characters.
@@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?
@@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.
What's the name of your VSCode theme?
Github theme 🚀
@@DaveGrayTeachesCode awesome, thanks!
Can i Ask u for help on a react game? U have discord so i Can explain the question detailed?
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.